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随 着 互联 网 技术 的 迅速 发 展 ，Web 1.0 和 Web 2.0 的 时 代 已 经 离 我 们 远 去 。 一 些 互联 网 
头 纷纷 己 的 实际 行动 迎接 HTML 5 和 CSS 3 技术 的 到 来 ， 所 有 主流 的 浏览 器 都 已 经 
始 支持 HTML 5 和 CSS 3 技术 的 很 多 特性 。 网 页 的 代码 变 得 越 来 越 整洁 ， 对 搜索 引擎 的 支持 
也 越 来 越 好 ， 甚 至 在 移动 设备 端 ， 浏 览 器 对 HTML 5 也 提供 了 很 好 的 支持 。 

本 书 针对 初学 者 ， 全 程 介绍 了 网 站 制作 、 发 布 和 维护 的 过 程 。 本 书 共 分 为 21 章 。 第 1~3 
章 介绍 网 站 的 规划 与 准备 工作 ， 在 读者 对 网 站 制作 有 一 个 整体 认识 之 后 ， 开 始 介 绍 如 何 创 
建站 点 ， 以 及 网 站 制作 开发 工具 的 使 用 方法 。 第 4~5 章 逐步 介绍 网 页 中 文本 、 图 像 和 超 链接 

的 使 用 方法 ， 因 为 这 些 内 容 都 是 每 个 网 页 中 必 不 可 少 的 元 素 。 接 下 来 介绍 如 何 使 用 表格 和 
列表 展示 数据 ， 以 及 它们 的 特殊 用 法 。 第 6~9 章 介绍 CSS 样 式 的 基础 知识 、 结 合 div 元 素 布局 
网 页 结构 以 及 制作 网 站 导航 菜单 功能 的 方法 。 表 单 作 为 用 户 与 网 站 交互 的 窗口 ， 也 进行 
详细 的 介绍 。 第 10~11 章 介绍 JavaScript 基 础 知识 以 及 如 何 创建 交互 式 网 页 。 第 12~14 章 介绍 
HTML 5 和 CSS 3 的 新 功能 ， 包 括 新 的 标签 元 素 、 音 频 与 视频 的 操作 方法 ， 以 及 CSS 3 中 各 
种 选择 器 的 灵活 使 用 技巧 。 第 15 章 对 响应 式 Web 设 计 进 行 了 简要 的 介绍 。 第 16~18 章 开始 详 
细 介 绍 PHP 基 础 知识 以 及 MySQL 数 据 库 的 使 用 方法 ， 指 导读 者 创建 动态 网 站 。 第 19 章 和 20 
章 分 别 介绍 了 域名 和 空间 的 相关 知识 ， 以 及 网 站 测试 、 上 传 和 维护 的 方法 。 最 后 ， 第 21 章 
介绍 了 搜索 引擎 优化 的 一 些 知识 ， 帮 助 读者 提高 网 站 的 曝光 率 。 

本 书 适 合 以 下 读者 对 象 : 
























































































































































































































































希望 自己 动手 制作 网 站 的 初学 者 
有 上 志 于 从 事 网 站 开发 的 专业 人 士 
各 种 类 型 网 站 的 站 长 
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第 1 章 规划 与 准备 


站 建设 初期 的 首要 工作 是 网 站 策划 ， 其 重点 在 于 对 网 站 的 设计 、 建 设 、 推 广 和 运营 等 
各 个 方面 进行 整体 的 规划 。 不 同行 业 的 公司 对 于 网 站 规划 的 具体 要 求 也 不 一 样 ， 但 一 般 都 会 
确定 网 站 的 定位 、 类 型 、 结 构 、 版 式 和 布局 ， 以 及 是 否 使 用 动态 布局 等 。 













































































41” 网 页 制作 基础 

















网 页 是 构成 网 站 的 基本 元 素 ， 不 同类 型 的 网 站 由 不 同类 型 的 网 页 组 成 ， 无 论 是 哪 种 类 型 
的 网 页 ， 都 是 由 文字 、 图 片 、 动 画 、 音 频 、 视 频 等 信息 组 成 ， 网 站 的 建立 不 能 一 跳 而 就 ， 需 
要 经 过 详细 的 制作 流程 。 












































1.1.1 网 页 与 网 站 


网 页 通常 是 指 一 个 单独 的 页 面 ， 也 就 是 我 们 在 浏览 器 中 看 到 的 效果 ， 但 它 仅 限于 一 个 
页 文件 。 而 网 站 由 多 个 网 页 共同 组 成 ， 各 个 网 页 之 间 通 过 超 链 接 等 方式 连接 在 一 起 ， 组 成 
站 的 各 个 页 面 。 网 页 表 定 是 指 一 个 页 面 ， 即 使 这 个 页 面 中 内 说 了 其 他 的 页 面 ， 它 仍然 称 之 为 
一 个 页 面 ， 但 是 网 站 一 定 是 多 个 页 面 的 集合 ， 各 个 页 面 之 间 具 有 内 在 的 关联 。 最 简单 的 情况 
下 ， 如 果 一 个 网 站 中 只 有 一 个 页 面 ， 我 们 也 可 以 将 其 称 为 网 站 。 




















































































































































































































1.1.2 网 站 的 类 型 
互联 网 上 有 很 多 的 网 站 ， 按 照 网 站 主体 性 质 的 不 同 ， 可 将 这 些 网 站 分 为 以 下 几 类 : 
1. 个 人 网 站 


个 人 网 站 是 以 满足 个 人 兴趣 爱好 为 目的 而 开发 制作 的 网 站 ， 这 类 网 站 往往 具有 十 分 鲜明 
的 个 人 特色 。 例 如 图 1.1 就 是 一 个 非常 独特 的 个 人 网 站 。 



















































































会、 网 站 


作 、 发 布 与 维护 技术 实战 





2. 企业 类 网 站 


企业 类 网 ; 

















站 是 企业 在 互联 网 上 进行 宣传 的 














找到 企业 的 














站 ， 从 而 了 解 到 最 新 资讯 。 例 如 
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有 安 称 











了 








| 

















户 可 以 在 互联 网 上 搜索 关键 字 查 
1.2 是 海尔 集团 























图 1.2 
3. 机 构 类 网 站 
机 构 类 网 站 通常 都 是 为 政府 或 组 织 创建 的 
例如 图 1.3 为 北京 大 学 网 站 首页 。 


林 建 华 率 团 赴 美 访问 
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的 网 站 首页 。 

















要 以 形象 宣传 和 服务 为 3 











娱乐 休闲 类 网 站 


娱乐 休闲 类 网 站 又 可 以 分 为 电影 网 站 、 游 戏 网 站 、 交 友 
等 ， 这 些 网 站 为 我 们 提供 了 丰富 的 娱乐 休闲 项 目 。 随 着 互联 
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站 、 社 区 论坛 、 手 机 短信 和 网 站 
技术 的 高 速 发 展 ， 以 





后 也 许 还 





会 出 现 更 多 类 型 的 娱乐 休闲 类 网 站 。 例 如 图 1.4 是 国内 比较 有 名 的 一 个 游戏 网 站 首页 。 
1.4 
5. 门户 类 网 站 














互联 网 上 的 信息 非常 多 ， 为 了 大 家 上 网 方便 ， 有 些 人 将 这 些 信息 进行 
制作 成 网 站 ， 这 类 网 站 综合 了 各 个 领域 的 资源 ， We 








感 兴趣 的 资源 ， 这 样 的 网 站 就 是 门户 类 网 站 ， 





狐 等 ， 比 如 图 1.5 是 网 易 首页 。 
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网 络 监督 专区 
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内 比较 知名 的 门户 类 网 站 有 新 浪 、 网 易 、 费 


东 翌 于 
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6. 行业 信息 类 网 站 











随 着 互联 网 的 发 展 、 网 





民 人 数 的 增多 及 





上 不 同 兴趣 群体 的 形成 ， 


















门户 网 站 已 经 明显 不 























































































能 满足 不 同 群体 的 需要 。 一 批 能 够 满足 某 一 特定 领域 的 网 上 人 群 及 其 特定 需要 的 网 站 应 运 而 
生 ， 这 就 是 行业 信息 类 网 站 ， 比 如 图 1.6 是 58 同 城 网 站 首页 。 
,EE 刀 居 8 天 和 名 计量 
同姓 区 免费 发 和 信息 
这 58 民 站 ee 
Bm es er ss se Wt Fh 可 sm 昌 NM WR 
Wm Wii 。 知 企业。 BT | 本 本 好 服务 站 有) 
Ed 有 间 条 三 人 se 可 条 as 
用 站 用 a ne 人 和 pi Pm i 人 
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UF 3 本 pt 有 证 是 BR 于 
40 -020 Si 2 本 商人 务 
图 1.6 
7. 购物 类 网 站 
随 着 互联 网 的 普及 和 人 们 生活 水 平 的 提高 ， 网 上 购物 已 经 成 为 一 种 时 尚 ， 它 正在 悄然 改 
变 着 人 们 的 生活 习惯 。 购 物 网 站 上 丰富 的 商品 、 低 廉 的 价格 、 优 质 的 服务 已 经 让 越 来 越 多 的 


人 离 不 天 


[ED 
下 wwwjdcomicu-tueautm 











F 它 ， 比 如 图 1.7 是 京 





东 商 城 的 首页 。 





























1.7 











1.1.3 网 页 的 基本 构成 





从 上 面 列举 的 各 种 类 型 的 网 
文本 、 图 像 和 超 链 接 ， 还 需要 灵活 运 






























































融合 为 网 站 的 灵魂 ， 使 有 标题、 段落、 样式 、 字 体 颜色 、 篆 景 等 元 素 让 整个 页 古 
一 些 特 殊 的 效果 ， 还 可 以 使 用 动画 、 音 频 、 视 频 等 元 素 ， 甚 至 通过 
效果 ， 比 如 动画 效果 的 导航 等 。 





层次 感 。 另 外 ， 为 了 达到 
CSS 样 式 完成 一 些 特殊 的 














1.1.4 网 站 开发 与 制作 流程 
网 站 开发 需要 同时 具备 程序 员 、 设 计 师 和 客户 3 个 要 素 才能 完成 。 程 序 员 是 网 站 开发 的 









































们 网 站 交付 的 对 象 ， 负 责 


网 站 的 制作 流程 可 以 分 为 以 下 几 个 步骤 ; 
目标 需求 分 析 。 网 站 建设 初期 ， 需 要 与 客户 确定 需求 ， 从 而 确定 网 站 的 内 容 与 风 


格 ， 以 及 应 该 使 用 的 文字 内 容 、 图 片 、 动 画 、 音 频 、 视 频 等 元 素 ， 确 定 网 站 所 
能 等 尽量 详细 的 需求 ， 并 形成 项 目 计划 书 与 客户 确认 。 


处 理 软件 ， 还 需要 熟悉 Dreamweaver 和 Flash 等 制作 软件 ， 需 要 具备 一 定 的 
是 供 网 站 发 布 的 内 容 、 决 定 页 面 的 色彩 以 及 确定 排版 方式 。 
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站 效果 可 以 看 出 ， 要 构建 一 个 绚丽 多 彩 的 网 页 ， 不 仅 需要 
这 些 元 素 。 通 过 合理 的 布局 ， 让 文本 、 


像 和 超 链接 


























主力 军 ， 不 但 要 具备 深厚 的 程序 设计 功底 ， 还 需要 具有 良好 的 沟通 能 力 。 设 计 师 负责 网 站 整 
体 的 界面 设计 ， 不 但 要 精通 Photoshop、CorelDRAW、IIIustator、AutoCAD、3ds Max 等 图 像 












































美观 。 客 户 是 我 


版 与 各 模块 功 


加 制作 网 页 。 需求 分 析 结 束 后 ， 就 可 以 开始 制作 网 页 了 。 此 时 应 该 首先 确定 网 站 的 定 
位 ， 确 定 网 站 是 一 个 个 人 网 站 、 企 业 类 网 站 或 者 门户 类 网 站 等 。 只 有 确定 了 网 站 的 类 型 ， 才 
能 进一步 确定 网 站 的 框架 导航 ， 这 个 过 程 需要 程序 员 与 设计 师 进 行 详细 的 讨论 ， 包 括 网 站 各 


个 栏目 的 内 容 ， 实 现 的 方式 以 及 如 何 应 用 按钮 、 图 像 、 超 链接 等 元 素 。 网 站 提 





站 LOGO 与 网 站 色彩 设置 需要 与 客户 进行 沟通 确认 。 


加 网 站 测试 。 





站 开发 完整 后 ， 要 在 本 地 服务 器 上 进行 系统 的 测试 ， 测 


过 FTP 上 传 至 网 络 服务 器 ， 进 行 网 络 测试 。 
加 上 线 运行 。 上 线 运行 是 交付 网 站 的 一 个 重要 阶段 ， 在 上 线 运行 期 间 ， 要 密切 注意 网 


站 的 运行 效果 。 
四 网 站 推广 。 

















版 要 灵活 ， 网 


试 通过 后 ， 通 


站 上 线 后 ， 为 了 提高 网 站 的 影响 力 ， 需 要 通过 各 种 方式 对 网 站 进行 扒 
广 ， 如 注册 搜索 引擎 、 与 其 他 网 站 交换 广告 条 、SEO 优 化 和 媒体 推广 等 。 


12 网 站 策划 

















个 方面 进行 整体 的 策划 ， 关 





站 策划 是 网 站 建设 初期 的 首要 工作 ， 其 台 








点 在 于 





F 对 网 站 的 设计 、 建 设 、 推 广 和 运营 等 各 














提供 完善 的 解决 方案 。 不 同 的 公司 对 了 





F 网 站 策划 的 具体 要 求 也 不 一 
































样 ， 但 一 般 都 会 确定 网 站 的 定位 、 类 型 、 结 构 、 板 式 与 布局 ， 以 及 是 否 使 用 动态 布 





局 寺 。 
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1.2.1 网 站 的 定位 


网 站 的 定位 主要 考虑 到 网 站 的 主题 以 及 用 户 群体 两 个 方面 。 前 的 网 站 有 很 多 ， 按 照 不 
同 的 标准 ， 网 站 又 可 以 分 为 很 多 类 型 ， 要 精确 把 握 网 站 的 主题 定位 ， 就 需要 考虑 当前 的 市 场 
规模 、 用 户 需求 以 及 竞争 情况 和 潜在 的 对 手 等 等 ， 明 确 了 这 些 问 题 ， 再 来 思考 我 们 网 站 的 主 
题 定位 就 不 再 那么 困难 了 。 网 站 的 内 容 与 网 站 的 用 户 定位 息息相关 ， 在 网 站 策划 中 ， 只 有 确 
定 了 什么 样 的 网 站 用 户 ， 才 能 精准 的 把 握 网 站 的 内 容 。 







































































































































































1.2.2 确定 网 站 类 型 


前 互联 网 上 的 网 站 很 多 ， 按 照 不 同 的 标准 可 以 将 其 划分 为 不 同 的 类 型 ， 每 一 个 网 站 都 
会 有 一 个 对 应 的 类 型 。 例 如 ， 前 面 介绍 的 网 站 按照 主体 性 质 的 不 同 ， 可 以 分 为 个 人 网 站 、 企 
业 类 网 站 、 机 构 类 网 站 、 门 户 类 网 站 、 购 物 类 网 站 等 等 。 如 果 按 照 建设 类 型 来 分 ， 可 以 分 为 
助 建 站 和 定制 建站 两 种 类 型 。 自 助 建站 只 需要 懂得 如 何 操 作 电脑 ， 就 可 以 轻松 地 在 几 分 钟 
建立 起 一 个 网 站 ， 甚 至 还 可 以 定制 一 些 功能 ， 内 容 比较 丰富 ， 但 是 不 能 迁移 网 站 。 定 
制 建站 则 需要 专业 的 网 站 建设 团队 根据 你 的 要 求 ， 定 制 出 一 套 符合 你 需要 的 系统 ， 整个 建设 
周期 比较 长 ， 而 且 费 用 较 高 ， 但 是 可 以 自由 迁移 网 站 。 

从 实际 情况 出 发 ， 确 定 要 建立 一 个 什么 类 型 的 网 站 ， 需 要 自助 建站 还 是 定制 建站 ， 综 合 
权衡 利弊 ， 选 择 适合 自己 的 方式 开始 创建 网 站 。 


1.2.3 规划 网 站 结构 


规划 网 站 结构 的 中 心思 想 就 是 组 织 网 站 的 内 容 和 设计 结构 。 网 站 定位 确定 后 ， 就 可 以 确 
定 网 站 的 内 容 ， 接 下 来 就 是 对 [网 站 进行 规划 ， 以 确保 文件 内 容 调理 清晰 、 结 构 合理 ， 这 样 不 
仅 可 以 很 好 地 体现 设计 者 的 意图 ， 也 可 以 增强 网 站 的 可 维护 性 与 可 扩展 性 。 

至 于 网 站 应 该 呈现 什么 样 的 内 容 ， 应 该 从 网 站 设计 者 和 网 站 浏览 者 两 个 角度 进行 考虑 ， 
从 设计 者 的 角度 考虑 ， 纵 观 网 站 的 所 有 内 容 ， 进 一 步 细 化 网 站 内 容 分 类 ， 合 理 组 合 和 展示 内 
容 ; 从 浏览 者 的 角度 考虑 ， 根 据 网 站 风格 快速 定位 浏览 者 需要 的 信息 ， 并 为 浏览 者 提供 最 有 
效 的 信息 服务 。 


1.2.4 确定 版 式 与 布局 


网 站 的 版 式 是 网 站 的 整体 形象 ， 也 是 网 站 给 浏览 者 的 第 一 印象 。 例 如 ， 同 样 内 容 的 一 
个 网 站 ， 可 以 是 个 性 另类 的 ， 也 可 以 是 专业 严肃 的 ， 这 主要 取决 于 站 点 的 版 面 布局 、 浏 览 方 
式 、 交 互 性 、 文 字 、 内 容 价 格 等 诸多 因素 。 

1. 页 面 尺 十 

网 站 的 页 面 尺寸 会 直接 影响 到 浏览 者 的 浏览 体验 。 因 为 客观 条 件 的 影响 ， 同 一 个 网 页 在 
不 同 的 分 辩 率 下 显示 的 效果 也 会 有 所 差异 ， 为 了 获得 更 好 的 浏览 体验 ， 网 站 设计 者 应 该 充分 
考虑 到 用 户 浏览 器 分 辨 率 对 网 页 的 影响 ， 使 用 适应 浏览 者 的 分 辩 率 尺寸 ， 而 不 是 固定 的 页 理 
尺寸 。 
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2. 整体 形象 

站 的 风格 也 就 是 网 站 的 整体 形象 ， 通 过 网 站 的 色彩 、 技 术 、 文 字 、 布 局 、 交 互 方式 可 

以 概括 出 一 个 网 站 的 个 性 ， 可 以 是 粗 狂 豪放 的 ， 也 可 以 是 墨守成规 的 。 

3. 网 页 布局 
页 布局 在 网 站 建设 中 的 作用 越 来 越 重要 ， 随 着 技术 的 不 断 发 展 ， 浏 览 者 已 经 不 再 满足 

简单 的 文字 与 图 片 堆 又 式 的 布局 ， 更 多 交互 式 的 新 的 布局 方式 越 来 越 受到 人 们 的 欢迎 。 

4. 网 页 配色 

在 网 站 策划 中 ， 对 于 网 页 配色 这 种 非常 主观 的 问题 ， 需 要 有 一 个 判断 标准 。 网 页 设计 者 

可 以 提供 一 些 类 似 的 网 站 进行 分 析 ， 并 征集 合作 人 员 的 意见 ， 与 客户 反复 进行 沟通 确认 ， 最 

终 确定 配色 方案 。 


1.2.5 决定 是 否 使 用 动态 页 面 


静态 页 面 和 动态 页 面 在 网 站 建设 中 都 会 用 到 ， 至 于 哪些 页 面 需 要 使 用 静态 页 面 ， 哪 些 页 
需要 使 用 动态 页 面 ， 这 主要 取决 于 网 站 的 功能 需求 和 网 站 内 容 的 多 少 。 如 果 网 站 功能 比较 
简单 ， 内 容 更 新 量 不 是 很 大 ， 采 用 纯 静 态 网 页 的 方式 会 更 简单 ， 反 之 一 般 要 采用 动态 网 页 技 
术 来 实现 。 
















































































































































































































































































































































































43 网 站 受众 分 析 





网 站 受众 分 析 并 非 赁 空想 象 出 来 的 ， 它 是 根据 必要 的 市 场 调查 ， 从 大 量 的 数据 中 对 网 站 
受众 群体 进行 分 析 ， 进 而 从 不 同方 面 提升 访问 者 的 满意 度 。 


1.3.1 必要 的 市 场 调查 


市 场 调查 可 以 被 定义 为 收集 和 分 析 有 关 特 定 产品 和 服务 的 数据 的 过 程 。 通 过 调查 了 解 需 
求 ， 比 如 受众 群体 希望 网 站 上 更 多 的 呈现 一 些 什么 信息 ， 什 么 样 的 信息 才能 吸引 他 们 更 多 的 
关注 ， 不 同 的 受众 群体 会 因为 他 们 的 年 龄 或 社会 地 位 而 关注 不 同 的 内 容 ， 这 就 需要 一 份 切合 
实际 的 市 场 调查 ， 以 便 确 定 网 站 的 目标 群体 。 







































































1.3.2 如 何 提 高 访问 者 满意 度 


网 站 的 访问 者 是 网 站 存在 的 意义 ， 为 了 提高 网 站 访问 者 的 满意 度 ， 可 以 通过 以 下 几 种 
方式 : 
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(1) 多 途径 收集 用 户 反馈 信息 
(2) 深入 研究 用 户 心 理 。 
(3) 内 容 和 服务 的 不 断 创新 。 
(4) 竞争 对 手 的 

(5) 用 户 的 售 

































































民 务 是 否 否 到 位 。 
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4:4 搜集 素材 




















一 个 完整 的 网 站 需要 包含 文字 、 图 片 ， 甚 至 是 音频 视频 等 很 多 素材 ， 有 些 素材 可 以 
创作 ， 有 些 素材 可 以 从 其 他 网 站 上 下 载 和 加 工 。 为 了 便于 管理 这 些 素 材 ， 可 以 将 搜集 到 的 素 
材 按照 类 别 整 理 到 不 同 的 文件 夹 ， 为 网 站 的 创建 做 好 准备 。 


1.4.1 网 站 内 容 需 


网 站 的 内 容 由 网 站 的 定位 来 决定 ， 定 位 明确 了 ， 网 站 的 内 容 就 有 了 方向 。 网 站 的 内 容 
非 全 部 必须 是 原创 ， 可 以 是 客户 提供 的 一 些 信息 ， 如 公司 简介 、 产 品 介绍 ， 还 可 以 是 其 他 网 
站 一 些 文章 的 引用 ， 但 需要 得 到 许可 才 行 。 无 论 怎样 ， 对 于 网 站 来 说 ， 它 的 内 容 必 须 能 够 给 
户 提供 有 价值 的 信息 ， 这 样 才 能 受到 用 户 的 青睐 。 当 然 ， 就 个 人 站 点 来 说 ， 原 创 的 内 容 应 
该 更 多 一 些 ， 这 样 也 有 利于 搜索 引擎 的 收录 和 网 站 的 推广 。 


1.4.2 绘制 草图 


站 草图 设计 主要 分 为 3 个 部 分 : 网 站 首页 、 目 录 页 以 及 内 容 页 的 草图 设计 。 网 站 首页 
是 网 站 的 门面 ， 它 应 该 最 能 直观 的 反应 出 网 站 的 主要 内 容 。 首 页 中 的 导航 应 该 尽量 简洁 一 
些 ， 网 站 中 最 终 的 内 容 都 应 该 在 导航 中 能 够 快速 的 展示 。 根 据 网 站 类 型 的 不 同 ， 首 页 中 各 个 
栏目 的 内 容 也 应 该 突出 重点 ， 去 除 一 些 可 有 可 无 的 信息 ， 这 样 才 可 以 把 用 户 留 在 自己 的 网 站 
上 。 目 录 页 的 设计 主要 以 简单 、 实 用 为 主 ， 根 据 网 站 的 定位 ， 向 用 户 展示 尽 可 能 多 的 主题 信 
息 ， 这 样 用 户 才 可 以 有 更 多 的 选择 。 内 容 页 的 设计 需要 根据 不 同 的 主题 来 确定 ， 不 同 主题 的 
网 站 在 内 容 页 的 展示 上 有 很 大 的 差别 。 例 如 ， 诗 歌 网 站 的 内 容 页 应 该 是 一 篇 文章 ， 而 购物 网 
站 的 内 容 页 应 该 是 相关 商品 的 详细 介绍 。 























































































































































































































































































































































































































1.4.3 搜集 文本 与 图 片 


文本 与 图 片 是 网 站 承载 的 主要 内 容 。 文 本 可 以 通过 手工 录入 ， 也 可 以 从 其 他 文档 摘录 或 
者 通过 扫描 仪 等 设备 获取 ， 还 可 以 从 互联 网 上 搜索 。 图 片 的 搜集 也 有 很 多 途径 ， 例 如 通过 照 
相 设 备 采 集 、 通 过 扫描 仪 扫 描 ， 或 者 通过 互联 网 搜索 的 方式 下 载 ， 如 果 有 特殊 需要 ， 还 可 以 
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通过 一 些 绘图 软件 制作 
不 能 


片 。 无 论 是 通过 哪 种 途径 获取 文本 与 图 片 ， 都 应 当 尊 重 知 识 产权 ， 
能 盗用 他 人 的 文章 或 图 片 


， 如 需 引 用 ， 需 要 得 到 他 人 的 许可 。 


























1.4.4 组 织 网 站 内 容 


网 站 的 内 容 大 致 可 以 分 为 两 种 ， 一 种 是 
的 交互 信息 。 向 用 户 展示 的 信息 按照 内 容 将 最 主要 的 
一 些 特别 的 信息 可 以 用 粗 体 、 颜 色 或 一 些 动画 效果 展 
图 标 显示 。 而 与 用 户 交互 的 信息 往往 会 受到 某 些 用 户 
栏 ， 这 样 既 可 以 显示 当前 网 站 备 受 其 他 人 关注 ， 还 忆 
些 什么 事情 ， 引 导 用 户 做 更 多 的 操作 。 
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展示 的 信息 ， 另 一 种 是 用 户 与 网 站 
分 展示 在 最 能 吸引 用 户 眼 球 的 地 方 ， 
， 如 打折 促销 商品 可 以 用 一 个 降价 的 

球 ， 这 些 信 息 可 以 展示 在 网 页 的 侧 
告诉 用 户 其 他 人 在 这 个 网 站 上 都 做 了 
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1.4.5 建立 站 点 地 图 


站 点 地 图 上 面 放置 了 网 站 上 所 有 页 面 的 链接 ， 它 是 整个 网 站 的 结构 图 ， 可 以 帮助 用 户 了 
解 整个 网 站 的 内 容 ， 还 可 以 为 搜索 引擎 提供 帮助 ， 有 利于 搜索 引擎 抓 取 网 页 。 
如 果 网 站 的 内 容 很 多 ， 用 户 在 浏览 网 站 的 时 候 可 能 会 迷失 。 如 果 网 站 页 面 总 数 超过 了 
100 个 ， 就 需要 挑选 出 最 重要 的 页 面 放 在 站 点 地 图 中 ， 如 产品 分 类 页 面 、 网 站 内 容 的 关键 页 
、 访 问 量 最 大 的 几 个 页 面 以 及 帮助 页 面 等 。 















































































































































































































































1:5 ”选用 合适 的 工具 








Web 技 术 发 展 到 今天 ， 要 建立 一 个 网 站 ， 可 供 我 们 选择 的 工具 有 很 多 ， 其 中 包括 网 页 编 
辑 器 、 图 像 处 理 软件 和 浏览 器 等 。 


1.5.1 选择 合适 的 网 页 编辑 器 


最 简单 的 网 页 编辑 器 就 是 记事 本 ， 我 们 可 以 使 用 记事 本 打开 所 有 的 网 页 ， 也 可 以 使 用 记 
事 本 编写 所 有 的 网 页 代码 ， 但 是 为 了 提高 工作 效率 ， 以 及 帮助 一 些 初学 者 提高 编程 能 力 ， 我 
们 需要 选择 一 款 合适 的 文本 编辑 器 和 一 款 专 业 的 HIML 编辑 器 。 

1. 选择 一 款 文本 编辑 器 

文本 编辑 器 是 用 于 编写 普通 文本 的 软件 ， 当 然 也 可 以 用 于 编写 网 页 程序 。 目 前 可 供 选择 
的 文本 编辑 器 有 很 多 ， 如 Notepad++、PsPad、Komodo、Coda、Vim、UltraEdit、NoteTab、 
EditPlus 等 。 这 些 文本 编辑 器 各 有 各 的 优点 ， 有 的 可 以 对 文本 的 语法 进行 着 色 ， 有 的 可 以 自动 
完成 拼写 ， 根 据 个 人 的 具体 使 用 习惯 ， 可 以 选择 一 款 合适 的 文本 编辑 器 。 
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2. 选择 一 款 专 业 HTML 编 辑 器 

对 于 简单 的 页 面 ， 我 们 可 以 使 用 文本 编辑 器 完成 页 面 的 制作 ， 但 是 对 于 专业 的 网 站 来 
说 ， 要 提高 开发 效率 ， 就 需要 使 用 专业 的 HTML 编 辑 器 。 目 前 可 以 选择 的 HTML 编 辑 器 有 
Amaya、Dreamweaver、Frontpage、Microsoft Expression Web、CoffeeCup HTML Editor、 
CKEditor 等 ， 本 教程 将 使 用 Dreamweaver 为 大 家 讲解 网 站 的 制作 方法 。 


1.5.2 选择 合适 的 图 像 处 理 软 件 


在 制作 网 站 时 ， 有 时 候 需 要 我 们 自己 对 一 些 图 片 进 行 处 理 ， 这 时 候 就 需要 借助 一 些 图 
处 理 软件 ， 比 如 Photoshop、CorelDRAW、Fireworks 等 。 对 于 不 同 的 需求 ， 需 要 使 用 不 同 的 
像 处 理 软件 对 图 像 进行 处 理 ， 比 如 要 裁剪 一 副 图 片 ， 就 需要 使 Photoshop 。 
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1.5.3 选择 合适 的 浏览 器 


同样 一 个 网 站 在 不 同 的 浏览 器 中 可 能 呈现 不 同 的 效果 ， 这 主要 是 因为 目前 可 供 选择 的 浏 
览 器 可 能 具有 不 同 的 引擎 ， 他 人 相交 HTM 而 代 有 不 加, 另外 ， 不 同 
的 浏览 器 在 安全 性 和 实用 性 等 诸多 方面 都 会 有 所 差别 。 目 前 主流 的 浏览 器 包括 卫 、Mozilla 
Firefox、Chrome、Opera 等 ， 为 了 更 好 的 讲解 HTMI 的 相关 功能 ， 本 教程 将 使 用 多 种 浏览 器 进 
行 讲解 。 
























































































































































第 2 章 创建 本 地 站 点 











Dreamweaver 可 以 用 来 快速 编辑 页 面 ， 也 可 以 用 来 创建 站 点 及 其 结构 。 在 本 地 编辑 完成 



































的 web 页 面 可 以 直接 在 Dreamweaver 中 保存 到 站 点 并 预览 页 面 效 果 。 
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Dreamweaver 是 美国 Macromedia 公 司 开发 的 一 款 用 了 
用 该 软件 可 以 快速 编写 网 页 ， 并 对 网 站 进行 管理 。 本 节 袜 























用 方法 。 




















Dreamweaver 使 用 基础 








2.1.1 Dreamweaver 桌 面 的 基本 结构 

















Dreamweaver 经 过 多 个 版 本 的 更 新 ， 














后 ， 你 会 看 到 如 图 2.1 所 示 的 界面 
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前 的 最 新 版 本 是 Dreamweaver CC， 打 








图 2.1 














该 界面 中 的 HTML 图 标 即 可 创建 一 个 HTML 页 面 ， 效 果 如 图 2.2 所 示 。 

















F 开 发 和 管理 网 页 的 专业 编辑 器 ， 使 
要 介绍 Dreamweaver 的 一 些 基本 使 
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图 2.2 














Dreamweaver 桌 面 的 左上 角 是 一 排 功能 菜单 按钮 ， 通 过 这 些 菜单 可 以 完成 Dreamweaver 中 
的 所 有 功能 操作 ， 例 如 信件 文件 操作 、 代 码 管理 、 格 式 设 置 、 属 性 设置 、 站 点 管理 等 。 
桌面 的 左下 角 区 域 是 属性 区 域 ， 当 用 户 在 文档 窗口 中 输入 不 同 的 内 容 时 ， 属 性 区 域 会 根 
居 当 前 鼠标 光标 所 在 位 置 显示 当前 对 象 的 属性 。 
中 间 的 空白 区 域 就 是 文档 窗口 ， 新 建文 档 以 “Untitled-” 加 数字 序号 命名 ， 文 档 名 称 1 
面 有 3 个 按钮 ， 分 别 切换 代码 视图 、 拆 分 视图 和 设计 视图 。 例 如 ， 在 代码 视图 中 编写 一 
段 代 码 ， 这 段 代码 用 于 插入 一 幅 图 片 ， 当 切换 到 拆 分 视图 时 ， 当 前 窗口 会 被 分 割 成 两 个 部 
分 ， 一 部 分 用 于 显示 代码 ， 另 一 部 分 用 于 显示 代码 呈现 的 效果 ， 所 以 此 时 既 可 以 看 到 代码 ， 
也 可 以 看 到 插入 的 图 片 ， 当 切换 到 设计 视图 时 ， 用 户 只 能 看 到 当前 页 面 的 HTML 代 码 效 果 。 

桌面 的 右 侧 是 一 个 快捷 面板 ， 在 这 个 面 版 本 中 包含 了 “插入 ”“ 文 件 ”“CSS 设 计 器 ” 
和 和 “CSS 过滤 效果 ” 几 个 选项 板 ， 每 个 选项 板 中 都 对 应 有 相关 的 操作 ， 提高 HTML 页 面 
的 制作 效率 ， 用 户 还 可 以 根据 自己 的 需要 自 定义 面板 内 容 。 


2.1.2 文档 的 基本 操作 


在 Dreamweaver 中 对 文档 的 操作 主要 是 通过 “文件 ”菜单 来 完成 的 ， 其 中 包括 文档 的 
新 建 、 打 开 、 编 辑 、 关 闭 、 保 存 、 另 存 、 导 入 和 导出 等 操作 。 当 用 户 启动 Dreamweaver 软 件 
时 ， 系 统 会 自动 为 用 户 创建 一 个 HTML 文 档 并 打开 这 个 文档 ， 用 户 可 以 直接 在 文档 窗口 中 对 
当前 的 HTMIL 文 档 进 行 编辑 ， 还 可 以 插入 或 粘贴 从 其 他 途径 获取 的 HTML 内 容 。 如 图 2.3 所 示 
为 代码 视图 效果 。 
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图 2.3 


在 设计 视图 中 ， 用 户 还 可 以 通过 “查看 ”菜单 控制 网 格 与 标尺 的 显示 和 隐藏 ， 如 果 有 
需要 还 可 以 设置 网 格 的 颜色 和 行距 ， 以 及 设置 标尺 的 单位 是 像素 、 英 寸 或 厘米 。 需 要 注意 的 
是 ， 在 设计 视图 中 看 到 的 网 页 效果 并 非 是 网 页 在 浏览 器 中 的 最 终 效果 ， 只 有 通过 在 浏览 器 中 
预览 才能 得 到 网 页 的 最 终 效 果 。 如 图 2.4 所 示 为 设计 视图 效果 ， 图 2.5 所 示 为 浏览 器 中 页 面 的 
显示 效果 。 
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图 2.4 
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2.1.3 源 代码 的 格式 化 和 净化 


在 代码 视图 中 ，Dreamweaver 有 一 套 自己 的 代码 格式 标准 。 如 果 HTML 页 面 中 的 代码 比较 
多 ， 不 利于 阅读 ， 可 以 通过 “命令 ”菜单 ， 选 择 “应 用 源 格式 ”命令 对 当前 HTML 页 面 中 的 



























































0 \ 上 全 品 i 、 3 
代码 进行 格式 化 操作 ， 格 式 化 后 的 代码 具有 对 称 的 代码 结构 ， 非 常 有 利用 阅读 。 如 图 2.6 所 示 
y 品 a ig 一 品 要 
为 格式 化 操作 之 前 的 代码 效果 ， 图 2.7 所 示 为 格式 化 操作 之 后 的 代码 效果 。 
<body> <body> 
<div class="va-slice va-slice-a"> <div class="va-slice va-slice-3"> 
<div class="caption"> <div class="caption"> 
<div class="caption-grid"> ‘<div class="caption-grid"> 
<div class="caption-left"> <div class="caption-left"> 
<h3>Project Name # 12</h3> <h3>Project Name # 12</h3> 
</div> </div> 
<div class="caption-right"> bi <div class="caption-right"> </div> 
<div class="clearfix"> </di <div class="clearfix"> </div> 
<div class="sub-caption"> <div class="sub-caption"> 
<div class="sub-caption-left"> </div> <div class="sub-caption-left"> </div> 
<div class="sub-caption-right"> <div class="sub-caption-right"> 
<p>New York</p> <p>New York</p> 
</div> </div> 
<div class="clearfix"> </div> <div class="clearfix"> </div> 
</div> </div> 
</div> </div> 
</div> </div> 
</div> </div> 
</body> </body> 
图 2.6 图 2.7 
y 本 二 s 4 Ee 
所 谓 净 化 HTML 代 码 ， 实 际 上 就 是 对 HTML 源 代码 的 一 种 净化 。 很 多 通过 网 页 制作 工具 
> N= s EL 
生成 的 文档 中 存在 大 量 无 用 代码 和 错误 代码 ， 这 些 代码 不 仅 元 余 ， 还 浪费 下 载 时 间 ， 浏 览 器 














E 解 析 这 些 代码 时 还 可 能 出 错 ， 所 以 使 用 Dreamweaver 的 “命令 ”菜单 ， 选 择 “ 清 理 HTML” 
能 ， 不 仅 可 以 修复 这 些 问题 ， 还 可 以 提高 代码 质量 。 例 如 ， 在 图 2.8 所 示 的 代码 中 ， 被 选中 
了 3 标记 中 没有 任何 内 容 ， 属 于 宛 余 的 代码 ， 使 用 源 代 码 净化 就 可 以 非常 轻松 地 清理 类 似 这 
f 的 标记 ， 而 且 该 功能 还 可 以 指定 清除 特定 的 标记 。 
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莽 营 其 





<body> 
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</div> 
</div> 
</body> 





<div class="clearfix"> </div> 
</div> 
</div> 


<div class="va-slice va-slice-3"> 
<div class="caption"> 


<div class="caption-grid"> 
<div class="caption-left"> 
<h3>Project Name # 1200EEEIEER /hs> 
</div> 


<div class="caption-right"> </div> 
<div class="clearfix"> </div> 
<div class="sub-caption"> 


<div class="sub-caption-left"> </div> 
<div class="sub-caption-right"> 
<p>New York</p> 

</div> 


E 本 地 站 点 











2.1.4 使 用 历史 面板 


Dreamweaver 的 历 


中 





区 


记录 了 大 
对 象 、 编 辑 和 删除 的 内 容 等 ， 这 些 操作 全 部 保 


又 ， 恢 复 文档 之 前 的 操作 。 


在 Dreamweaver 叶 


其 实 就 是 在 

















站 点 的 操作 非常 简 让 








如 











加 2.9 所 示 。 


加 在 打开 的 “站 点 管理 ”对 话 框 中 点 击 “ 创 建站 点 ”按钮 ， 如 图 2.10 所 示 。 

















Ph 建立 站 点 ， 是 进行 网 站 
EDreamweaver 中 














面板 














FE 文档 窗口 中 
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7 
2.2 建立 站 点 











个 关键 步骤 。 这 和 
定义 站 点 、 策 划 站 点 结构 、 部 署 开 发 环境 。 使 
EE， 详细 操作 步骤 如 下 : 





发 的 





所 讲 的 于 

















E 立 站 点 ， 








新 建站 点 。 在 快捷 面板 中 选择 “文件 ”面板 ， 点 击 该 面板 中 的 “管理 站 点 ”链接 ， 


人 站 吉 


Dreamweaver 创 建 




















| 
| [ED [ER i se] 
Ce Ca 
图 2.9 图 2.10 

















h 操 作 的 历史 ， 包 括 输入 的 文本 、 插 入 的 
留 在 历史 面板 户 可 以 撤销 一 个 或 多 个 步 
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和 在 打开 的 “站 点 设置 对 象 我 的 测试 站 点 ”对 话 框 中 重新 设置 站 点 的 名 称 和 站 点 文件 
ge 并 保存 所 有 的 设置 ， 如 图 2.11 所 示 。 


站 点 没 轨 对 条 我 的 测 汪 站点 ma 















































er 
二 目 
En Ce Cm 
图 2.11 
加 在 面板 中 选中 定义 的 站 点 ， 右 键 单 击 站 点 名 称 ， 在 弹出 的 快捷 菜单 中 选中 新 建文 
件 夹 ， 新 建 “Images”“Js” 和 “CSS”3 个 文件 夹 ， 这 3 个 文件 夹 将 分 别 用 于 存放 图 片 、 
JavaScript 代 码 和 CSS 样 式 表 ， 如 图 2.12 所 示 。 并 非 所 有 的 站 点 结构 都 是 这 3 个 文件 夹 ， 根 据 不 


同 的 网 站 结构 和 内 容 ， 可 以 创建 更 加 精细 的 管理 结构 。 


[Ee ~v 二 地 M 而 v ph 他 | 及 会 
ZE 3 














图 2.12 


通过 以 上 几 步 简单 的 操作 一 个 本 地 站 点 就 创建 完成 了 。 





一 


2.3 ”复制 和 修改 站 点 








在 菜单 栏 中 选择 “站 点 ”一 “管理 站 点 ”命令 ， 打 开 “管理 站 点 对 话 框 ， 如 图 2.13 所 
示 。 该 对 话 框 中 列举 了 当前 所 有 的 站 点 ， 选 中 一 个 站 点 名 称 后 ， 单 击 列表 下 面 的 “复制 ” 按 
钮 ， 以 当前 选中 的 站 点 复制 一 个 新 的 站 点 。 如 果 要 修改 选中 的 站 点 ， 可 以 单 击 列表 下 面 的 
“编辑 ”按钮 ， 打 开 “ 站 点 设置 对 象 ”对 话 框 ， 对 站 点 进行 编辑 。 










































































Web 页面 。 
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2.4 “创建 第 一 个 Web 页 面 


























任何 一 个 复杂 的 网 页 都 是 由 基本 的 网 页 元 素 构成 ， 下 面 我 们 就 来 看 一 看 如 何 创建 基本 的 
























































2.4.1 用 记事 本 创建 页 面 

































































对 于 一 些 简单 的 web 页 面 ， 完 全 可 以 使 用 记事 本 完成 页 面 的 创建 。 例 如 ， 我 们 要 使 用 记 















































本 创建 一 个 只 显示 一 段 文字 的 简单 页 面 ， 就 可 以 按照 以 下 步骤 进行 操作 。 


加 创建 一 个 记事 本 文件 。 
加 修改 记事 本 文件 的 后 级 名 为 html。 

因 鼠标 右键 点 击 新 创建 的 文件 ， 在 打开 方式 中 选择 以 记事 本 打开 文件 。 
加 在 打开 的 文件 中 输入 以 下 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title> 我 的 页 面 </title> 
</head> 

<body> 

<h2> 第 一 个 测试 页 面 </h2> 
</body> 

</html> 
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辆 保存 文件 ， 这 样 就 完成 了 一 个 简单 Web 页 面 的 抽 


2.4.2 用 Dreamweaver 创 建 页 面 



































也 可 以 创建 一 个 基本 的 html 文 档 。 









































使 用 Dreamweaver 创 建 的 html 文 档 与 使 用 记事 本 创建 


启动 Dreamweaver 后 ， 在 启动 界面 中 选择 “html” 图 标 ， 如 图 2.1 所 示 ， 这 样 就 可 以 创建 
个 基本 的 html 文 档 。 另 外 ， 通 过 选择 “文件 ”一 “新 建 ”命令 ， 选 择 “ 新 建 HTMIL 文 档 ” 























本 创建 的 html 文 档 ， 所 有 的 html 代 码 都 需要 自己 输入 ,ff 






































的 html 文 档 有 很 大 的 不 同 。 使 用 记 村 
而 使 用 Dreamweaver 创 建 的 html 文 档 ， 
系统 已 经 默认 为 用 户 提供 了 基本 的 html 文 档 结构 ， 用 户 只 需要 在 3 


















































2.4.3 保存 Web 页 面 



































体 部 分 添加 代码 即 可 。 




















在 保存 Web 页 面 的 时 候 ， 我 们 希望 根据 站 点 的 结构 将 相关 的 Web 页 面 保存 在 相同 的 文件 





夹 中 ， 这 样 当 某 些 Web 页 面 中 的 超 链接 发 生 改 变 的 时 候 ， 系 统 会 提示 更 新 这 些 超 链接 ， 以 保 





























证 站 点 下 所 有 页 面 都 能 正常 运行 。 














2.4.4 预览 Web 页 面 



































览 器 中 真正 的 效果 ， 如 果 要 预览 Web 页 面 的 实际 效果 ， 














在 Dreamweaver 的 设计 视图 中 ， 我 们 可 以 预览 网 页 的 效果 ， 但 是 这 种 预览 并 非 网 页 在 浏 




















可 以 单 击 文本 窗口 上 面 的 “在 浏览 器 












































哪 种 浏览 器 中 进行 预览 ， 以 适应 更 多 浏览 器 。 


中 预览 ”按钮 ， 这 样 就 可 以 在 浏览 器 中 预览 当前 的 Web 页 面 了 ， 


























户 还 可 以 根据 需要 指定 在 














第 3 章 在 Dreamweaver 中 创 
建 与 使 用 模板 


Dreamweaver 作 为 网 页 开发 中 一 款 重 要 的 工具 ， 不 仅 能 直观 的 看 到 网 页 开发 的 效果 ， 而 
且 还 能 极 大 的 提高 网 页 开发 效率 ， 其 中 的 模板 功能 可 以 为 网 站 提供 基础 模板 ， 网 站 中 框架 类 
似 的 页 面 都 可 以 通过 模板 来 创建 ， 这 样 不 仅 省 时 省 力 ， 而 且 还 可 以 统一 网 站 的 风格 。 



























































3.1 创建 网 页 模板 


A 





在 创建 网 页 模板 时 ， 可 以 指定 模板 中 哪些 元 素 是 可 变 的 ， 哪 些 元 素 是 不 可 变 的 ， 可 变 的 
元 素 可 以 作为 不 同 页 面 的 核心 内 容 ， 不 可 变 元 素 可 以 作为 整个 网 站 中 独 有 风格 的 一 部 分 。 例 
如 ， 网 站 的 logo 图 标 和 导航 栏 就 是 模板 中 不 可 变 的 元 素 ， 而 每 个 页 面 中 的 主体 内 容 则 是 可 变 
的 元 素 。 这 两 部 分 内 容 并 不 是 一 成 不 变 的 ， 可 以 根据 需要 进行 编辑 。 
在 Dreamweaver 中 创建 网 页 模板 时 ，Dreamweaver 会 自动 把 模板 存储 在 站 点 的 本 地 根 文件 
夹 下 的 Templates 子 文件 夹 中 ， 如 果 此 文件 夹 不 存在 ，Dreamweaver 会 自动 创建 。 



































































































































3.1.1 创建 空白 模板 
创建 一 个 空白 的 模板 可 以 按照 以 下 步骤 进行 操作 : 


打开 Dreamweaver， 选 择 “文件 ”一 “新 建 ” 命 令 ， 打 开 “ 新 建文 档 ” 对 话 框 ， 在 该 
对 话 框 中 选择 “空白 页 ”， 页 面 类 型 选择 “HTML 模 板 ”， 如 图 3.1 所 示 。 
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[EE 
国 Bam 





A CE 员 可 
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加 单 击 “创建 ”按钮 ， 创 建 一 个 空白 的 HTML 模 板 文件 。 
贺 选择 “文件 ”一 “保存 ”命令 ， 弹 出 如 图 3.2 所 示 的 提示 框 ， 单 击 “ 确 定 ” 按 钮 。 打 
开 “ 另 存 模板 ”对 话 框 ， 如 图 3.3 所 示 。 









































另存 模板 [x 

站 点 :和 3 站 点 | 保存 
可 板 : [入 | | [一 
Dreamweaver 醒 so 本 二 二] 

生 此 模板 不 可 有 任 阿 可 嘛 外 区 域 。 读 插 指 综 号? 
EE 过 
EE 取 少 另存 为: | 本 3 时 辐 村 助 
图 3.2 图 3.3 

















四 设置 模板 保存 站 点 和 名 称 后 ， 单 击 “ 保 存 ” 按 钮 。 


这 样 就 创建 了 一 个 空白 的 网 页 模板 文件 ， 网 页 模板 文件 的 后 缀 名 为 dwt。 后 期 还 可 以 对 
这 个 网 页 模板 进行 编辑 ， 设 置 更 多 的 可 编辑 区 域 。 


3.1.2 根据 现 有 文档 创建 模板 


通常 情况 下 ， 我 们 会 根据 一 个 现 有 的 页 面 文件 来 创建 模板 ， 具 体操 作 步 骤 如 下 ; 
四 选择 “文件 ”一 “打开 ”命令 ， 如 图 3.4 所 示 ， 选 择 一 个 HTML 页 面 ， 打 开 现 有 的 


























文件 。 
加 打开 四 
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坦 识 > 新 在 广 欠 突 ~ 四 全 
A se 大 小 


css 
BB imagee 
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全 MyStepen 





:| MySiteheml ~ [Al Documerte Chtnv Pl v 





GE 录 | FD) | | WN 








图 3.4 











贺 选择 “文件 ”一 “另存 为 ”命令 ， 如 图 3.5 所 示 ， 选 择 保存 类 型 为 “Template Files(*. 
dwb”， 设 置 文件 名 ， 单 击 “保存 ”按钮 。 

加 将 光标 移动 到 需要 编辑 的 区 域 ， 依 次 选择 “插入 ”一 “模板 ”一 “可 编辑 区 域 ” 命 
令 ， 如 图 3.6 所 示 。 
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重复 步骤 加 的 操作 ， 设 置 其 他 可 编辑 区 域 ， 最 终 保存 模板 即 可 。 


ea 


3.2 应 用 网 页 模板 











创建 了 网 页 模板 后 ， 我 们 可 以 根据 网 页 模板 创建 网 页 ， 具 体操 作 步 骤 如 下 ; 
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网 页 ， 如 图 3.8 所 示 。 














加 选择 “文件 ” 一“ 新建” 命令 ， 打 开 “ 新 建文 档 ” 对 话 框 ， 如 图 3.7 所 示 。 
辆 在 该 对 话 框 中 左边 的 列表 中 选择 “网 站 模板 ”， 然 后 选择 模板 所 在 站 点 ， 在 该 站 点 
下 的 模板 列表 中 选择 一 个 模板 ， 最 后 单 击 “ 创 建 ” 按 钮 ， 这 样 就 根据 选择 的 模板 创建 了 一 个 


Te 
DAE 


EE 

















根据 模板 创建 的 页 面 ， 当 鼠标 移动 到 可 编辑 区 域 时 ， 可 以 直接 输入 需要 编辑 的 内 容 ， 当 
鼠标 移动 到 不 可 编辑 区 域 时 ， 鼠 标 会 显示 一 个 限制 状态 的 图 标 。 

前 面 说 过 ， 网 页 模板 并 不 是 一 成 不 变 的 ， 我 们 可 以 根据 需要 对 网 页 模板 进行 编辑 。 比 如 
要 更 换 一 个 网 页 模板 中 的 logo 图 标 ， 可 以 使 用 Dreamweaver 打 开 这 个 网 页 模板 ， 选 中 要 更 换 的 
logo 图 标 ， 并 替换 成 新 的 图 标 。 保 存 该 模板 文件 时 ，Dreamweaver 会 提示 用 户 是 否 更 新 根据 此 
模板 创建 的 网 页 ， 用 户 可 以 选择 更 新 或 者 不 更 新 。 
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3:3 简单 的 模板 页 面 











本 节 我 们 将 创建 一 个 网 页 模板 ， 并 根据 这 个 模板 创建 其 他 几 个 HTML 页 面 ， 最 终 这 几 个 

















页 面 








只 
个 


会 通过 超 链接 联系 在 一 起 ， 详 细 操 作 步 骤 如 下 : 


启动 Dreamweaver， 新 建 一 个 名 为 Index 的 HTML 页 面 。 这 个 页 面 中 的 内 容 非常 简单 ， 
一 个 超 链接 ， 目 标 地 址 是 后 面 需 要 根据 模板 创建 的 第 一 个 HTML 页 面 ， 该 页 面 中 的 代码 








如 下 所 示 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>Index</title> 
<style> 
a{text-decoration:none} 
</style> 

</head> 

<body> 

<hl><a href="grade 1.html"> 点 击 进入 </a></h1l> 
</body> 

</html> 


园 选 择 “文件 ”一 “另存 为 ”命令 ， 将 步骤 国 ] 新 建 的 HTML 页 面 另 存 为 模板 文件 ， 命 


名 为 template.dwt。 注 意 ， 模 板 文 件 需要 保存 在 站 点 的 跟 目 录 下 的 Templates 文 件 夹 中 ， 否 则 将 
不 能 根据 站 点 下 的 模板 创建 文件 。 





园 在 代码 视图 中 为 模板 文件 创建 一 个 简单 的 页 面 结构 ， 相 关 代 码 如 下 所 示 ， 在 设计 视 











图 中 的 效果 如 图 3.9 所 示 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>Template</title> 

<style> 

body { font-family:Verdana; font-size:14px; margin:0;} 

#container {margin:0 auto width:900px;} 

#sidebar { float:left; width:200px; height:500px; background:#6cf;} 
#content { float:right; width:695px; height:500px; background:#cff;} 
ul{list-style:none;} 

a{ftext-decoration:none} 

</style> 

</head> 

<body> 

<div id="container"> 
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<div id="sidebar"> 
<ul> 
<li><a href="grade 1. html"> 一 年 级 </a></1i> 
<li><a href="grade 2. html"> 二 年 级 </a></1i> 
<li><a href="grade 3.html "> 三 年 级 </a></1i> 
</ul> 
</div> 
<div id="content"> 
<h1> 诗 歌 朗诵 </h1> 
<h3>《 乡 悉 》</h3> 
<p> 小 时 候 <br> 
乡愁 是 一 枚 小 小 的 邮票 <br> 
我 在 这 头 <br> 
母亲 在 那 头 <br> 
长 大 后 <br> 
乡愁 是 一 张 窗 窗 的 船 票 <br> 
我 在 这 头 <br> 
新 娘 在 那 头 <br> 
后 来 啊 <br> 
乡愁 是 一 方 矮 矮 的 坟墓 <br> 
我 在 外 头 <br> 
母亲 在 里 头 <br> 
而 现在 <br> 
乡愁 是 一 湾 浅 浅 的 海峡 <br> 
我 在 这 头 <br> 
大 陆 在 那 头 <br> 
</p> 
</div> 
</div> 
</body> 
</html> 

















用 鼠标 选中 “诗歌 朗诵 ”这 几 个 字 ， 然 后 按 快捷 键 Cl+AltrV， 在 弹出 的 对 话 框 中 输 
入 可 编辑 区 域 的 名 称 为 type， 然 后 单 击 “ 确 定 ” 按 钮 ， 如 图 3.10 所 示 。 
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名 和 :Type 
此 区域 将 可 以 在 基于 该 模板 的 文 冰 
中 进行 编辑 。 








图 3.10 











重复 步骤 加 ， 将 文字 “乡愁 ”和 诗歌 段落 分 别 设置 为 可 编辑 区 域 ， 名 称 分 别 为 Title 
和 Content， 保 存 修改 后 的 模板 文件 ， 效 果 如 图 3.11 所 示 。 














图 3.11 


国 选择 “新 建 ”一 “文件 ”命令 ， 在 弹出 的 “新 建文 档 ” 对 话 框 中 选择 “网 站 模 
板 ”， 如 图 3.12 所 示 。 选 中 当前 的 站 点 ， 选 择 刚才 创建 的 模板 文件 ， 单 击 “ 创 建 ” 按 钮 。 








图 3.12 











加 根据 模板 创建 的 文件 如 图 3.13 所 示 ， 在 代码 视图 中 ， 不 可 编辑 的 内 容 显示 为 灰色 ， 可 
编辑 的 内 容 显 示 为 正常 颜色 。 我 们 创建 的 第 一 个 页 面 不 需要 改变 模板 中 的 任何 内 容 ， 直 接 保 
存 为 grade_1.html 文 件 即 可 。 
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etype Ftnl> 
<html> el Inata 











了 

9 村 cbr> 
我 在 这 头 <br> 
母亲 在 那 涉 <br> 


长 太后 <br> 

多 悉 是 一 张 安 窑 的 粘 票 cbr> 
我 在 这 头 <br> 

新 纺 在 那 头 <br> 


后 厅 啊 <br> 
L 乡 禾 是 一 万 入 和 的 坟 莫 <br> 
br> 


母 闪 在 蛙 头 <br> 
mE<br> 

多 釉 是 一 湾 法 法 的 海峡 <br> 
我 在 这 头 <br> 

大 陆 在 那 尖 <br> 














图 3.13 











国 根据 模板 再 创建 一 个 名 为 grade_2.html 的 文件 ， 并 修改 可 编辑 


所 示 。 





区 域 的 内 容 ， 











< 王岳 本 Co <br> 
歌唱 我 们 亲爱 的 祖国 ， 从 今 走向 毗 荣 言 强 。<br> 
1 歌唱 我 们 亲爱 的 祖国， 从 今 走 问 驶 竺 夏 强 。<br> 
越过 高 山 ， 越 这 平原 ， 跨 过 奔腾 的 获 河 长 江 ; <br> 
宽广 美丽 的 大 地 ， 是 我 们 亲爱 的 宗 乡 ，<br> 
英雄 的 人 民 让 起 来 了 ! 我 们 革 结 友 妥 坚强 如 铀 。<br> 
四 入 te 笠 利 歌 产 参 么 响亮; <br> 
从 今 走向 毓 和 富强 。<br> 
es 从 今 走 向 种 条 富强 。<br> 
日 。 我 们 划 萤 ， 我 们 勇 故 ， 五 千年 历史 光 才 位: <br> 
我 们 战 时 了 一 切 苦难 ， 才 得到 分 天 的 解放 ! <br> 
6 我 们 要 和 下 fig a A MR <br> 











太阳 升 起 ， 万 区 光芒， 人 民 共和 国正 在 成 长 ; <br> 
<5 ”我 们 领 油 毛 泽 东 ,指点 着 前 进 的 方向 。<br> 
s ”我 们 的 和 ; a 

















图 3.14 











如 图 3.14 
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国 根据 模板 再 创建 一 个 名 为 grade 3.html 的 文件 ， 并 修改 可 编辑 区 域 的 内 容 ， 如 图 3.15 
所 示 。 








上 3 乙 : 唉 ， 今 儿 都 业 调 了 <br> 
1 有 甲 ; 给 大 家 介绍 一 下 我 竺 边 的 这 位 ， 我 哥们 ， 拜 把 子 兄弟 ， 要 说 这 兄弟 有 时 候 也 不 是 什么 好 乌 ! <br> 
上。 己 : 说 嘛 呢 9 说 阱 气 、 谁 不 是 什么 好 乌 啊 ? <br> 
| 甲 ， 你 是 好 与 <br> 
4。 乙 : 哎 ! 嘿 ? 有 这 勾 说 话 的 吗 ? <br> 
|5 。 甲 我 疫 说 你 ， 就 打 这 么 一 个 比方 <br> 
Bs 乙 : 没 这 么 比 的 cer> 
7 : 大家 都 说 咽 ， 宁 罕 煌 轩 三 结义 ， 不 学 巨商 一 炉 香 cbr> 


>。 用: 信守 硬结 ,刘备 ， 关 沁 ， 张 三 人 儿 ， 一 个 闪 夺 地 上 了 ,器 条 吕 弟 似 的 ， 回 兴 儿 ,兄弟 三 人 保 店 借 本 天 职 经 了，<br> 





|。 加: 只 9 引 逢 又， 有 一 个 和 人 的 尼 <br> 
2 妇 噬 ， 作客 1 cbr> 
前 ;给 大 条 介绍 一 下 ， 也 和 村 名 相生 末世 二 宗 br， 














图 3.15 


四 在 浏览 器 中 浏览 index.html 页 面 ， 单 击 该 页 面 中 的 超 链接 ， 在 新 打开 的 页 面 中 单 击 “ 一 
年 级 ”“ 二 年 级 ”和 “三 年 级 ”， 可 分 别 浏览 到 刚才 创建 的 页 面 ， 效 果 如 图 3.16 所 示 。 


二 © iC ampp/hidoc Yarede-2 Prd © eC pampo/mc rae ahtml 
me mA 


AEF Rd, WRT 


RT 
TH 


人 TE 
PE, #0, FE 147, Rt, BL, R= 人 
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和 超 链 接 






































网 页 中 不 同 的 元 素 承载 着 不 同 的 内 容 ， 而 文本 、 图 像 和 超 链接 是 众多 元 素 中 使 用 最 多 的 

















3 种 网 页 元 素 ， 目 前 互联 网 






































绝 大 多 的 网 页 都 是 由 文本 、 图 像 和 超 链 接 这 3 种 元 素 构成 ， 本 章 




















将 主要 介绍 这 3 种 元 素 的 使 

















方法 。 


4.14 认识 HTML 文 档 的 结构 

















HTML 文档 由 很 多 的 标签 和 元 素 组 成 ， 自 从 HIML 创建 以 来 ， 已 经 经 历 了 很 多 个 版 本 ， 












































大 的 变化 。 


4.1.1 什么 是 HTML 


HTML (Hyper Text Mark-up Language) 即 超 文本 标记 语言 ， 是 WWW 的 描述 语 
Tim Berners-lee 提 出 。HIML 语 言 最 初 的 设计 目的 是 将 多 人 台电 脑 中 的 文本 或 图 形 联系 在 一 起 ， 
这 样 只 需要 在 任何 一 台电 脑 上 打开 一 个 文档 ， 就 可 以 获取 多 台电 脑 中 的 资源 ， 而 这 些 资 源 可 
以 保存 在 网 络 中 的 任何 一 从 

















电脑 中 。 














前 最 新 版 本 的 HTML 文档 结构 与 早期 的 HTML 文档 机 构 在 元 素 种 类 和 书写 规范 上 都 有 了 很 

























































































HTML 不 是 一 种 编程 语言 ， 而 是 一 种 标记 语言 ， 它 通过 一 整套 标记 标签 来 描述 网 页 ， 





HTML 标 签 可 以 描述 文字 、 











4.1.2 HTML 版 本 历史 





形 、 动 画 、 声 音 、 表 格 、 链 接 等 多 种 形式 的 内 容 。 

















HTML 版 本 的 历史 可 以 追溯 至 1993 年 6 月 ， 当 时 作为 互联 网 工程 工作 小 组 的 工作 草案 发 布 





了 第 一 版 非 标 准 的 超 文本 标记 语言 ， 后 来 又 分 别 在 1995 年 1 月 和 1996 年 1 月 发 布 了 HTML 2.0 和 





























HTML 3.0， 之 后 又 于 1997 征 




















E12 月 18 W3C 推 荐 了 HTML 4.0， 于 1999 年 12 月 24 W3C 推 



































荐 了 HTML 4.01， 直 到 2008 生 





在 继续 完善 中 。 


4.1.3 HTML 标 签 




















F1 月 22 日 ， 才 公布 了 HTML 5 的 第 一 份 正式 草案 ， 目 前 HTML 5 仍 


















































HTML 标 签 是 HTML 语 言 中 最 重要 的 组 成 部 分 ， 它 由 两 个 尖 括 号 组 成 。 通 常情 况 下 ， 
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网 








像 和 超 链接 











HTML 标 签 都 是 成 对 出 现 的 ， 第 








1 个 出 现 的 标签 称 为 开始 标签 ， 第 2 个 出 现 的 标签 称 为 结束 标 


签 ， 第 2 个 标签 会 有 一 个 结束 标记 ， 如 </html> 中 的 斜 杠 。 某 些 情况 下 ， 部 分 HTML 标签 本 身 
既是 开始 标签 也 是 结束 标签 ， 如 <br> 标 签 。 下 面 介绍 几 种 常见 的 HIML 标 签 。 





1. 文档 类 型 声明 标签 <IDOCTYPE> 


























DOCTYPE 是 文档 类 型 (Document Type) 的 缩写 ，<!DOCTYPE> 声明 一 个 页 面 的 文 
档 类 型 定义 Document Type Declaration，DTD ) 。 该 标签 位 于 文档 中 最 前 面 的 位 置 ， 通 过 确 



























































认 页 面 的 文档 类 型 定义 ， 可 以 同时 确定 页 面 使 用 哪 种 W3C 规 范 。 














2. <html> 标 签 


























<html> 标 签 用 于 告诉 浏览 器 














它 自身 是 一 个 HTMIL 文 档 。<html> 和 </html> 标 签 限定 了 文档 

















的 开始 点 和 结束 点 ， 在 他 们 之 间 是 文档 的 头 部 和 主体 。 





3.， <head> 标 签 


<head> 标 签 紧 跟 着 <html> 标 


<link>、<meta>、<script>、<sty 














签 ， 定义 文档 的 头 部 。<head> 标 签 中 可 以 包含 <base>、 
le> 和 <title> 标 签 ， 由 这 些 标签 组 成 的 元 素 可 以 引用 脚本 、 指 



























































示 浏览 器 在 哪里 使 用 到 样式 表 和 提供 元 信息 等 。 






































4. <title> 标 签 
<title> 标 签 是 <head> 标 签 中 唯一 要 求 包含 的 东西 ， 在 浏览 器 中 使 用 标题 ， 最 常见 的 


















































是 显示 在 浏览 器 标签 页 中 的 标题 ， 另 外 在 链接 列表 和 收藏 夹 书签 列表 中 都 可 以 看 到 <title> 标 








签 的 身影 。 
5. <body> 标 签 




















<body> 标 签 用 于 定义 文档 的 主体 ，HIML 中 绝 大 多 数 标签 以 及 元 素 都 会 在 body 元 素 中 呈 

















现 ， 例 如 文本 、 超 链接 、 图 像 、 表 格 和 列表 等 等 。 











6. <meta> 标 签 








<meta> 元 素 可 提供 有 关 页 
度 的 描述 和 关键 词 。<meta> 标 签 




















的 元 信息 (meta-information》， 比 如 针对 搜索 引擎 和 更 新 频 
位 于 文档 的 头 部 ， 不 包含 任何 内 容 。<meta> 标 签 的 属性 定义 





了 与 文档 相关 联 的 名 称 / 值 对 。<meta> 标 签 永远 位 于 head 元 素 内 部 。 








以 上 这 些 标签 都 是 HTML 页 























[中 最 基本 的 标签 ， 每 个 HTML 页 面 都 应 该 具有 这 些 标 签 。 






































例如 ， 通 过 Dreamweaver 新 建 一 个 HTML 页面， 切换 到 代码 视图 ， 可 以 看 到 DreamweaverI 已 经 
为 我 们 自动 创建 了 这 些 最 基本 的 标签 。 
































<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

</body> 

</html> 
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在 实际 的 项 网 页 中 不 仅 需 要 具有 这 些 基 本 标签 ， 根 据 网 站 设计 以 及 网 站 推广 的 需 
， 部 分 标签 还 会 重复 使 用 。 例 如 ， 以 下 是 新 浪 某 博客 网 页 中 的 部 分 代码 ， 有 兴趣 的 同学 还 
可 以 通过 使 用 浏览 器 查看 网 页 源码 的 方式 浏览 到 其 他 网 页 的 HTML 标签 。 














<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// 
WwWww.wW3 .org/TR/xhtm1l11/DTD/xhtm11-transitional.dtd"> 

<html xmlns="http://wwwW.W3-Org/1999/Xhtm]1"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title> 猪 肉 白菜 包 ， 一 分 钟 学 会 快速 发 面 的 技巧 _ 厨 恋恋 新 浪 博客 </title> 

<meta name="keywords" content=" 猪 肉 白菜 包 ， 一 分 钟 学 会 快速 发 面 的 技巧 厨 恋 恋 新 浪 博 
客 , 厨 恋 恋 , 厨 恋恋 , 美食 , 面 点 , 主食 , 包子 " /> 

<meta name="description" content=" 猪 肉 白菜 包 ， 一 分 钟 学 会 快速 发 面 的 技巧 _ 厨 恋恋 _ 新 浪 
博客 , 厨 恋恋 , " /> 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 

<meta http-equiv="mobile-agent" content="format=html5; url=http://blog. 
sina.cn/dpool/blog/s/blog 4ee9cd560102wp81.html?2vt=4"> 

<meta http-equiv="mobile-agent" content="format=wml; url=http://blog.sina. 
cn/dpool/blog/ArtRead.php?nid=4ee9cd560102wp81&vt=1"> 

<!-[if lte IE 6]> 

<script type="text/javascript"> 

try{ 

document .execCommand ("BackgroundImageCache", false, true); 

}catch(e){} 

“Cript> 

<![endif]-> 

<script type="text/javascript"> 

window.staticTime=new Date() .getTime (); 

oripe> 

<link rel="pingback" href="http://upload.move.blog.sina.com.cn/blog_ 
rebuild/blog/xmlrpc.php" /> 

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http:// 
upload.move.blog.sina.com.cn/blog_ rebuild/blog/xmlrpc.php?rsd" /> 

<link href="http://blog.sina.com.cn/blog rebuild/blog/wlwmanifest.xml" 
type="application/wlwmanifest+xml" rel="wlwmanifest" /> 

<link rel="alternate" type="application/rss+xml" href="http://blog.sina. 
com.cn/rss/1323945302.xml" title="RSS" /> 

<link href="http://simg.sinajs.cn/blog7style/css/conf/blog/article. 
css" type="text/css" rel="stylesheet" /><link href="http://simg.sinajs.cn/ 
blog7style/css/common/common.css" type="text/css" rel="stylesheet" /><link 
href="http://simg.sinajs.cn/blog7style/css/blog/blog.css" type="text/css" 
rel="stylesheet" /><link href="http://simg.sinajs.cn/blog7istyle/css/module/ 
common/blog.css" type="text/css" rel="stylesheet" /><style id="tplstyle" 
type="text/css">@charset "utf-8";@import url("http://simg.sinajs.cn/ 
bloginewtpl/css/8/8_14/t.css"); 

</style> 

<style id="positionstyle" type="text/css"> 

.sinabloghead .blogtoparea{ left:128px;top:39%;} 

.Sinabloghead .blognav{ left:115px;top:67%;} 

</style> 
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4.1.4 HTML 元素 


HTML 元 素 是 指 从 开始 标签 到 结束 标签 的 所 有 代码 。 大 部 分 的 HTML 元 素 都 有 开始 标签 
和 结束 标签 ， 开 始 标 签 和 结束 标签 之 间 的 内 容 称 为 元 素 的 内 容 。 元 素 的 内 容 可 以 为 空 ， 在 开 
始 标 签 中 使 用 和 斜 杠 结束 标签 ， 大 多 数 的 HTML 元 素 都 拥有 属性 。 
例如 下 面 这 段 代 码 : 
<body> 
<h2> 列 表 </h2> 
<hr/> 
<ul> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
</ul> 
</body> 
这 段 代 码 由 <body>、<h2>、<hr>、<ul> 和 <li> 这 些 标签 组 成 ，body 元 素 作为 主体 ， 其 他 
的 元 素 都 供 套 在 body 元 素 开始 标签 和 结束 标签 的 内 部 ， 作 为 body 元 素 的 内 容 。h2 元 素 表示 元 
素 的 标题 。<hr/> 元 素 的 内 容 为 空 ， 创建 一 条 水 平 线 ， 所 以 在 开始 标签 中 直接 使 用 结束 标 
签 。u 和 1i 元 素 用 于 表示 列表 ， 分 别 由 对 应 的 开始 标签 和 结束 标签 组 成 ，1i 元 素 作为 ul 元 素 的 
内 容 ， 而 文字 “项 目 ” 作 为 元素 的 内 容 。 
HTML 元 素 有 很 多 ， 在 本 书 的 讲解 中 ， 我 们 将 逐步 介绍 一 些 常 用 元 素 的 使 用 方法 。 
HTML 元 素 按 功能 类 别 排列 ， 可 以 分 为 以 下 几 种 。 


(1) 基础 的 元 素 ， 表 4.1 列 出 了 一 些 常 用 的 基础 元 素 。 












































































































































































































































表 4.1 
<!DOCTYPE> 定义 文档 类 型 
<html> 定义 HTML 文 档 
<title> 定义 文档 的 标题 
<body> 定义 文档 的 主体 
<hl> to <h6> 定义 HTML 标题 
<p> 定义 段落 
<br> 定义 简单 的 折 行 
<hr> 定义 水 平 线 
<1--...-> 定义 注释 








(2) 格式 相关 的 元 素 ， 表 4.2 列 出 了 一 些 常用 的 格式 相关 的 元 素 。 
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<acronym> 
<abbr> 
<address> 
<b> 
<bdi> 
<bdo> 
<big> 
<blockquote> 
<center> 
<cite> 
<code> 
<del> 
<dfn> 
<em> 
<font> 
<> 

<ins> 
<kbd> 
<mark> 
<meter> 
<pre> 
<progress> 
<q> 

<Ip> 

< 
<ruby> 
<s> 
<samp> 
<small> 
<strike> 
<strong> 
<sup> 
<sub> 
<time> 
<t> 

<U> 


<VaI> 








表 4.2 











定义 只 取 首 字母 的 缩写 

定义 缩写 

定义 文档 作者 或 拥有 者 的 联系 信息 
定义 粗 体 文本 

定义 文本 的 方向 ， 使 其 脱离 周围 文本 的 方向 设置 
定义 文字 方向 

定义 大 号 文本 

定义 长 的 引用 
定义 居中 文本 不 赞成 使 用 ) 
定义 引用 (citation) 

定义 计算 机 代码 文本 
定义 被 删除 文本 

定义 定义 项 目 
定义 强调 文本 

定义 文本 的 字体 、 尺 寸 和 颜色 (不 赞成 使 用 ) 
定义 斜体 文本 

定义 被 插入 文本 

定义 键盘 文本 

定义 有 记号 的 文本 

定义 预定 义 范 国内 的 度量 

定义 预 格式 文本 
定义 任何 类 型 的 任务 的 进度 

定义 短 的 引用 

定义 若 浏览 器 不 支持 ruby 元 村 显示 的 内 容 
定义 ruby 注释 的 解释 

定义 mby 注释 

定义 加 删除 线 的 文本 不 赞成 使 用 ) 
定义 计算 机 代码 样本 

定义 小 号 文本 

定义 加 删除 线 的 文本 不 赞成 使 用 ) 
定义 语气 更 为 强烈 的 强调 文本 
定义 上 标 文 本 

定义 下 标 文本 

定义 日 期 /时 间 

定义 打字 机 文本 

定义 下 划 线 文本 不 赞成 使 用 ) 
定义 文本 的 变量 部 分 

定义 视频 
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(3) 表单 相关 的 元 素 ， 表 4.3 列 出 了 一 些 常用 的 表单 相关 的 元 素 。 


标签 
<form> 
<input> 
<textarea> 
<button> 
<select> 
<optgroup> 
<option> 
<label> 
<fieldset> 
<legend> 
<isindex> 
<datalist> 
<keygen> 


<output> 


(4) 












描述 

定义 供用 户 输入 的 HTML 表单 
定义 输入 控件 

定义 多 行 的 文本 输入 控件 

定义 按钮 

定义 选择 列表 〈 下 拉 列 表 ) 

定义 选择 列表 中 相关 选项 的 组 合 
定义 选择 列表 中 的 选项 

定义 input 元 标的 标注 

定义 围绕 表单 中 元 标的 边框 
定义 fieldset 元 系 的 标题 

定义 与 文档 相关 的 可 搜索 索引 (不 赞成 使 用 
定义 下 拉 列 表 

定义 生成 密 钥 
定义 输出 的 一 些 类 型 





























框架 相关 的 元 素 ， 表 4.4 列 出 了 一 些 常用 的 框架 相关 的 元 素 。 
表 4.4 












<frame> 定义 框架 集 的 窗口 或 框架 
<frameset> 定义 框架 集 
<noframes> 定义 针对 不 支持 框架 的 用 户 的 替代 内 容 


<iframe> 


(5) 






<img> 
<map> 
<area> 


<canvas> 


<figcaption> 


<figure> 


(6) 












定义 内 联 框 架 








图 像 相关 的 元 素 ， 表 4.5 列 出 了 一 些 常 用 的 图 像 相 关 的 元 素 。 
表 4.5 


















定义 图 像 映 身 
定义 图 像 地 图 内 部 的 区 域 

定义 图 形 

定义 figure 元 标的 标题 

定义 媒介 内 容 的 分 组 ， 以 及 它们 的 标题 


音 视频 相关 的 元 素 ， 表 4.6 列 出 了 一 些 常用 的 音 视频 相关 的 元 素 。 
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表 4.6 






<audio> 定义 声音 内 容 。 











<source> 定义 媒介 源 。 
<track> 定义 用 在 媒体 播放 器 中 的 文本 轨道 。 
<video> 定义 视频 。 





(7) 链接 相关 的 元 素 ， 表 4.7 列 出 了 一 些 常用 的 链接 相关 的 元 素 。 
表 4.7 














定义 锚 


<link> 定义 文档 与 外 部 资源 的 关系 











定义 导航 链接 
(8) 列表 相关 的 元 素 ， 表 4.8 列 出 了 一 些 常 用 的 列表 相关 的 元 素 。 
表 4.8 

标签 描述 
<u> 定义 无 序列 表 
<ol> 定义 有 序列 表 
<li> 定义 列表 的 项 目 
<dir> 定义 目录 列表 (不 赞成 使 用 ) 
<d> 定义 定义 列表 
<dt> 定义 定义 列表 中 的 项 目 
<dd> 定义 定义 列表 中 项 目的 描述 
<menu> 定义 命令 的 菜单 /列表 
<menuitem> 定义 用 户 可 以 从 弹出 菜单 调用 的 命令 /菜单 项 目 
<command> 定义 命令 按钮 

(9) 表格 相关 的 元 素 ， 表 4.9 列 出 了 一 些 常 用 的 表格 相关 的 元 素 。 


表 4.9 


















<table> 





定义 表格 


<caption> 定义 表格 标题 

<th> 定义 表格 中 的 表 头 单元 格 

<t> 定义 表格 中 的 行 

<td> 定义 表格 中 的 单元 

<thead> 定义 表格 中 的 表 头 内 容 

<tbody> 定义 表格 中 的 主体 内 容 

<tfoot> 定义 表格 中 的 表 注 内 容 〈 脚 注 ) 
<col> 定义 表格 中 一 个 或 多 个 列 的 属性 值 


定义 表格 中 供 格式 化 的 列 组 


<colgroup> 
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(10) 样式 /章节 相关 的 元 素 ， 表 4.10 列 出 了 一 些 常用 的 样式 /章节 相关 的 元 素 。 

















表 4.10 
<style> 定义 文档 的 样式 信息 
<div> 定义 文档 中 的 节 
<span> 定义 文档 中 的 节 
<header> 定义 section 或 page 的 页 眉 
<footer> 定义 section 或 page 的 页 脚 
<section> 定义 section 
<article> 定义 文章 
<aside> 定义 页 面 内 容 之 外 的 内 容 
<details> 定义 元 标的 细节 
<dialog> 定义 对 话 框 或 窗口 
<summary> 为 <details> 元 标定 义 可 见 的 标题 





(11) 元 信息 相关 的 元 素 ， 表 4.11 列 出 了 一 些 常用 的 元 信息 相关 的 元 素 。 


表 4.11 
























<head> 定义 关于 文档 的 信息 
<meta> 定义 关于 HTML 文档 的 元 信息 
<base> 定义 页 面 中 所 有 链接 的 默认 地 址 或 默认 目标 











h 文 本 的 默认 字体 、 颜 色 或 尺寸 (不 赞成 使 用 ) 





<basefont> 定义 页 面 

















(12) 编程 相关 的 元 素 ， 表 4.12 列 出 了 一 些 常用 的 编程 相关 的 元 素 。 


表 4.12 
















定义 客户 端 脚本 





<script> 


<noscript> 定义 针对 不 支持 客户 端 脚本 的 用 户 的 替代 内 容 
<applet> 定义 嵌入 的 applet (不 赞成 使 用 ) 

<embed> 为 外 部 应 用 程序 ( 非 HIML) 定义 容器 
<object> 定义 嵌入 的 对 象 


<param> 





全 2 添加 文本 


文本 是 HTML 页面 中 最 重要 的 信息 之 一 ， 它 被 广泛 应 用 于 标题 和 段落 ， 下 面 我 们 就 来 看 
一 看 如 何在 HTML 文档 中 添加 标题 和 段落 ， 以 及 对 文本 进行 格式 化 操作 。 
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4.2.1 标题 


在 HIML 中 ， 标 题 























<h1> 到 <h6> 的 标签 进行 定义 ， 





义 最 小 的 标题 。 





浏览 器 会 自动 地 在 标题 的 前 














行 中 。 
使 




















<h1>1 号 标题 </h1> 
<h2>2 号 标题 </h2> 
<h3>3 号 标题 </h3> 
<h4>4 号 标题 </h4> 
<h5>5 号 标题 </h5> 
<h6>6 号 标题 </h6> 





不 同 的 标题 ， 标 题 了 


























内 容 是 否 为 粗 体 和 字号 都 不 相同 ， 例 如 下 夯 











使 























二 





h<hl> 定 义 最 大 的 标题 ，<h6> 定 


后 添加 空 行 ， 这 样 每 一 个 标题 就 只 会 显示 在 一 








这 段 代 码 ; 











hl 元 素 的 标题 字号 最 大 ， 到 h6 元 素 标题 字号 依次 减 小 ， 所 有 字号 均 为 粗 体 ， 每 一 个 








标题 单独 显示 一 行 ， 即 使 所 有 的 代码 都 写 在 一 行 ， 每 个 标题 





行 。 


这 段 代 码 运行 后 的 效果 如 图 4.1 所 示 。 


[CE 





€ PC |D localhostUntitied-1 htm| 


1 号 标题 
2 号 标题 
3 号 标 是 


4 标题 








图 4.1 











的 前 后 仍然 会 添加 一 个 额外 的 空 











在 HTML 文 档 中 ， 使 
结构 ， 而 且 还 会 为 搜索 引 

















4.2.2 段落 


在 HIML 文 档 中 
的 内 容 。 例 如 下 面 这 段 代 码 : 
<p>HTML 段 落 内 容 </p> 


<p> 第 一 个 段落 内 容 </p> 
<p> 第 二 个 段落 内 容 </p> 


























<p> 标 签 定义 段落 ，<p> 元 素 天 








这 段 代码 中 有 3 个 段落 ， 
所 示 。 


每 个 段落 都 





标题 来 构建 文档 的 索引 ， 不 仅 可 以 使 
擎 提供 更 好 的 支持 ， 有 利 ] 



































户 非常 方便 地 浏览 网 页 的 


网 页 的 收录 。 


F 始 标签 和 结束 标签 中 的 内 容 就 是 段落 














对 <p> 标 签 组 成 ， 





运行 这 段 代码 后 ， 效 果 如 图 4.2 
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印 阳 各 东 内 容 
和 个 自 戎 A 伍 
第 一 个 段落 内 容 











图 4.2 














浏览 器 为 每 个 段落 的 前 后 添加 空 行 ， 所 以 段落 与 段落 之 间 有 一 定 的 距离 ， 这 样 文章 的 段 
落 才 能 更 加 清晰 。 这 里 需要 注意 的 是 ，<p> 元 素 和 <br> 元 素 都 会 有 一 个 换行 的 效果 ， 但 是 不 
建议 用 <p> 元 素 替 代 <br> 元 素 的 换行 效果 。 


4.2.3 文本 的 格式 化 


在 HIMIL 文 档 中 ， 我 们 经 常 需要 使 用 一 些 特殊 的 格式 化 文字 来 展示 某 些 文本 ， 例 如 斜 
体 、 粗 体 、 上 标 、 下 标 等 。 为 了 满足 这 类 需求 ，HTML 提 供 了 一 套 文本 格式 化 标签 ， 如 表 
4.13 所 示 。 

































































表 4.13 


<small> 
<strong> 
<sub> 
<sup> 


<ins> 














<del> 

















例如 下 面 这 段 代码 ， 使 用 各 种 格式 化 标签 对 显示 的 文本 进行 格式 化 操作 。 运 行 这 段 代 码 
后 的 效果 如 图 4.3 所 示 。 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 文 本 格式 化 </title> 

</head> 

<body> 

<p> 这 是 普通 文本 <br/><b> 这 是 粗 体 文本 </b><br/> 
<big> 大 一 号 <br/><big> 再 大 一 号 </big></big><br/> 
<em> 这 是 着 重文 字 </em><br/> 

<i> 这 是 斜体 字 </i><br/> 

<small> 这 是 小 号 字 </small><br/> 
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<strong> 这 是 加 重 语气 文字 </strong><br/> 
X<sub>2</sub>X<sup>2</sup><br/> 
<ins> 设 置 插入 文字 </ins><br/> 
<de1> 这 是 删除 文字 </del><br/> 


</body> 
</html> 











百 二 SEE 
€ 3 @ (ClocalhosVuntited-1html 





这 旺 彰 通 文本 
这 生体 文本 
再 大 一 号 
这 怎 者 王 立 坟 
这 撕 用 从 产 
Reha 


Ex 















































全 3 插入 图 像 
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我 们 来 详 





图 像 是 HTML 网 页 中 另 一 个 非常 重要 的 信息 承载 对 象 。 无 论 是 背景 图 像 ， 还 是 网 站 
logo， 甚 至 是 网 页 中 的 各 种 图 标 ， 都 需要 通过 插入 的 方式 才能 在 网 页 
细 介 绍 如 何在 网 页 中 插入 图 像 。 
4.3.1 在 网 页 中 插入 图 像 

使 用 Dreamweaver 在 网 页 中 插入 图 像 的 方法 非常 简单 ， 可 以 参照 以 下 步骤 在 网 页 中 插入 
一 幅 图 像 。 

加 新 建 一 个 HTML 网 页 ， 切换 到 “设计 ”视图 。 

加 选择 “插入 ”一 “图 像 ” 一 “图 像 ”命令 ， 如 图 4.4 所 示 。 

































































FE sx (0) ss(O ws(s) BOW V(t 

| | Div(D) 

让 HTML5 VideofV) Carl+Alt+Shift+V 
画布 (A) 
Er 上 | 一 谷 () Ctrl+Alt+l 
泰 格 (D) Ctrl+Alt+T 筷 标 经 过 图 像 (R) 
Head(H) » Fireworks HTML(F) 
脚本 (S) 
Hyperlink(P) 

图 4.4 
(3) 在 打开 的 “选择 图 像 源 文件 ”对 话 框 中 选择 要 插入 的 图 像 ， 如 图 4.5 所 示 。 
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个 明 ， 这 台电 芒 ， 系统 (C] ，xampp ，htdocs ，Resource ，6 v 6 要 6 万 


组 织 ”新 建文 件 赤 
呈 EE 类 大 小 








pe 回 imeotjpe 2015/8/29 1037 JPG 文 忻 109 KB 
叶片 
国文 二 
及 下 fe 
国 音乐 
属 辣 可 
EE A 
Sinstal(0) ~ 


相对 于 : [ 文 癌 由 





~ | (gif"jpg:"jpeg".p v 
站点 恨 目 杂 而 二 取消 


文件 名 (N): img01jpg 














图 4.5 


















































(4) 单 击 “ 确 定 ”按钮 后 ， 选 中 的 图 像 就 插入 到 了 网 页 中 ， 效 果 如 图 4.6 所 示 。 
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图 4.6 


4.3.2 图 像 标签 (<img>) 和 源 属 性 (src) 




















使 用 Dreamweaver 在 HTML 页 面 中 插入 图 像 后 ， 我 们 再 切换 到 “代码 ”视图 ， 此 时 可 以 在 
<body> 标 签 中 看 到 下 面 新 增加 的 一 行 代 码 : 
<img src="img01.jpg" width="960" height="640" alt=""/> 


这 行 代码 由 一 个 <img> 标 签 组 成 ， 在 HTML 中 ，<img> 标 签 主要 用 于 在 网 页 中 插入 一 个 图 
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像 ， 标 签 中 的 src 属 性 指定 要 插入 图 像 的 位 置 。 在 上 例 中 ， 因 为 图 像 和 HTML 网 页 在 同一 个 文 
件 夹 中 ， 所 以 可 以 直接 写 图 像 的 名 称 ， 如 果 图 像 和 HTML 网 页 不 在 同一 个 文件 夹 中 ， 则 需要 
使 用 绝对 路 径 或 相对 路 径 来 指定 图 像 的 位 置 。 
如 图 4.7 所 示 ， 将 图 像 img01.jpg 移 动 到 img 文 件 夹 中 ， 这 样 HTMI 页 面 与 图 像 所 在 路 径 分 
属 不 同 的 目录 级 别 ， 如 果 要 在 HIML 页 面 中 正确 显示 图 像 ， 则 需要 使 用 如 下 所 示 代码 ; 
<img src="img/img01.jpg" width="960" height="640" alt=""/> 
CA 6 
EY == := 3 
图 本 1T 盾 ， 这 Ge 蒋 ， 素 统 (C] ， xampp ， htdocs ， Resource ， 6 
文 to 全 称 一 修改 日 其 类 大 小 
属 [一 上 上 ime 2015/8/29 1056 。 文件 夫 
[| 站 63.html 2015/8/29 10:54 。 HTML 文 六 1KB 
通 二 5 访问 的 位 秆 imgotjpg 2015/8/29 10:37 。 JpG 文件 109 KB 
网 训 E 担 
4.7 
举一反三 ， 如 果 HTML 页 面 与 图 像 分 属于 不 同 的 磁盘 下 ， 在 制定 图 像 路 径 的 时 候 ， 则 需 
使 用 图 形 的 绝对 路 径 。 例 如 ， 图 像 1mg01.jpg 位 于 D 盘 下 的 img 文 件 夹 中 ， 可 以 使 用 如 下 所 示 
代码 ， 在 HTML 页 面 中 插入 图 像 。 





























<img src="D:/img/img01.jpg" width="960" height="640" alt=""/> 


另 一 种 情况 ， 


如 果 要 插入 的 


一 个 网 络 地 址 ， 在 指定 图 形 路 径 


的 代码 : 



































图 像 并 非 存 储 在 本 地 ， 而 是 来 源 于 网 络 ， 那 么 该 图 像 就 会 有 
对， 必须 使 用 正确 的 网 络 地 址 才能 正确 显示 图 像 ， 例 如 下 

















<img src="http://cdn.duitang.com/uploads/item/201406/18/20140618192710_ 
jiYis.jpeg" width="960" height="640" alt=""/> 




















































































































4.3.3 alt 属 性 

<img> 标 签 中 有 一 个 alt 属 性 ， 该 属性 
况 下 图 像 将 无 法 显示 。 

(1) 网 速 太 慢 。 

(2) src 属 性 错误 。 

(3) 浏览 器 禁用 图 像 。 

(4) 用 户 使 用 的 是 屏幕 阅读 器 。 

当 图 像 无 法 显示 时 ， 网 页 中 图 像 所 在 位 置 会 根据 不 同 的 
是 谷歌 浏览 器 中 图 像 无 法 显示 的 效果 ， 图 4.9 是 正 浏览 器 中 图 

















于 指定 当 图 像 无 法 显示 时 的 替代 文本 。 以 下 4 种 情 





浏览 器 显示 不 同 的 效果 ， 如 

















像 无 法 显示 的 效果 。 


4.8 
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机 oy e ET OO Ee ole | 
Re et = a IA 
图 4.8 4.9 
以 上 两 幅 图 中 ，HTML 页 面 显示 的 文字 就 是 alt 中 指定 的 内 容 ， 详 细 代 码 如 下 所 示 : 
<img src="img/img02.jpg" width="320" height="320" alt=" 花 - 雾 中 人 "/> 
在 这 段 代码 中 ， 需 要 将 图 像 的 名 称 修改 成 “img002.jpg”。 因 为 在 img 文 件 夹 中 无 法 找到 
“img/img02.jpg” 对 应 的 图 像 文件 ， 所 以 src 指 定 的 图 像 位 置 无 效 。HTML 页 面 中 的 图 像 无 法 
正常 显示 ， 就 会 在 图 像 显示 的 位 置 用 alt 属 性 中 指定 的 内 容 蔡 代 图 像 。 
需要 注意 的 是 ，<img> 元 素 的 alt 属 性 和 title 属 性 都 可 以 指定 文字 内 容 ，alt 属 性 用 于 指定 关 
于 显示 一 段 描 述 性 文字 ， 当 鼠标 移动 到 图 像 所 在 




















图 像 无 法 显示 时 的 替代 文本 ， 而 title 属 性 用 
位 置 时 ， 在 鼠标 位 置 附近 会 显示 这 段 描述 性 文字 ， 如 图 4.10 所 示 。 








Ee = 
和 © fle//CAampp/htdocya/43html 
BD) dem ce 2 CI HIM 

















4.3.4 从 不 同 的 位 置 插入 图 像 
细心 的 同学 也 许 已 经 发 现 这 样 一 个 问题 ， 我 们 在 Dreamweaver 





插入 的 图 像 始终 显示 在 
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HTML 页 面 中 的 左上 角 。 如 果 想 让 插入 的 图 像 显示 在 HTML 页 面 的 中 间 位 置 ， 应 该 如 何 操作 呢 ? 
让 我 们 返回 到 Dreamweaver 操 作 界面 ， 切 换 到 设计 视图 。 单 击 选中 插入 的 图 像 ， 然 后 选 
择 “ 格 式 ” 一 “对 齐 ” 一 “居中 对 齐 ” 命 令 ， 如 图 4.11 所 示 ， 这 样 我 们 在 HTML 页 面 中 插入 
的 图 像 就 调整 到 了 中 间 位 置 ， 效 果 如 图 4.12 所 示 。 
Dw YH wa sav EAM 修改 [MD) 辣 SIO 姑 守 (5 宣 D(W) 帮助 
en @. 1 所 I SR 
ee 
图 4.11 
图 4.12 
返回 到 代码 视图 ， 我 们 发 现在 <img> 元 素 的 外 边 新 添加 了 一 个 <div> 元 素 ， 并 且 设 置 了 该 























元 素 的 align 属 性 为 center。 也 就 是 说 ， 此 时 <img> 元 素 作为 <div> 元 素 的 内 嵌 元 素 ， 并 且 
显示 ， 这 样 就 可 以 达到 图 像 居 中 显示 的 效果 。 相 关 代 码 如 下 所 示 : 


<div align="center"><img src="img/img01.jpg" width="960" height="640" 
alt=" 花 - 雾 中 人 "title=" 这 是 什么 花呢 ?"/></div> 





| 





盾 呈 








以 上 设置 图 像 位 置 的 方法 比较 
的 这 种 设置 ， 效 果 如 图 4.13 所 示 。 














局 限 ， 如 果 要 更 加 灵活 的 设置 


图 














像 的 位 置 ， 可 以 使 





























<img src="img/img01.jpg" width="960" height="640" alt=" 花 - 雾 中 人 " title=" 这 
是 什么 花呢 ? " style=" position:absolute; left:100px; top:50pzx;"/> 
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图 4.13 

















在 这 段 代 码 中 ， 我 们 添加 了 style 属 性 ， 并 设置 Position 为 absolute， 表 示 当 前 图 像 以 绝对 位 
置 显示 ， 然 后 设置 left 属 性 为 100px，top 属 性 为 50px， 表 示 当 前 图 像 的 左上 角 位 置 坐标 为 距离 
左边 界 100 个 像素 ， 距 离 上 边界 50 个 像素 ， 这 样 就 可 以 灵活 控制 图 像 显 示 的 位 置 了 。 


4.3.5 定义 图 像 的 高 度 和 宽度 


在 Dreamweaver 中 插入 图 像 后 ， 默 认 以 图 像 原始 尺寸 插入 图 像 ， 并 且 在 代码 中 用 width 表 
示 图 像 的 宽度 ， 用 height 表 示 图 像 的 高 度 ， 图 像 尺寸 单位 为 像素 px) 。 我 们 还 可 以 根据 需 
要 ， 手 动 调整 图 像 的 高 度 和 宽度 。 例 如 ， 上 例 中 插入 的 图 像 宽度 为 960， 高 度 为 640， 这 个 图 
像 在 网 页 中 显示 的 效果 太 大 了 ， 我 们 需要 调整 它 的 尺寸 宽度 为 400， 高 度 为 200， 刷 新 页 面 后 
的 效果 如 图 4.14 所 示 。 
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图 4.14 





























调整 后 的 图 像 效果 发 生 了 扭曲 变形 ， 这 是 因为 相对 图 像 的 原始 尺寸 ， 调 整 后 的 尺寸 失去 
了 宽 比 约束 ， 我 们 可 以 通过 等 比例 缩放 图 像 尺 寸 避 免 这 种 情况 。 


4.3.6 图 像 的 绕 排 
在 HTML 页 面 中 ， 文 字 和 图 像 是 最 重要 的 信息 承载 对 象 。 当 文字 和 图 像 必 须 同时 出 现在 


同一 个 区 域 时 ， 就 需要 使 用 图 像 的 绕 排 功能 。 
<img> 元 素 的 align 属 性 用 于 指定 图 像 及 



































































































































周围 元 素 的 排列 方式 ，align 可 指定 的 值 为 left、 
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图 片 左 对 齐 效果 如 图 4.15 所 示 。 


























right、top、middle 和 bottom。1left 和 right 会 将 图 像 浮动 到 周围 元 素 的 左边 或 者 右边 的 边界 上 ， 
top、middle 和 bottom 会 将 图 像 与 周围 文字 在 垂直 方向 上 对 齐 。 
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片 右 对 齐 效果 如 图 4.16 所 示 。 




















时 天: 片 对 天 
对 齐 效 果 ， 图 片 对 齐 : 



































图 4.16 
垂直 居 上 对 齐 效果 如 4.17 所 示 。 
rm 
图 4.17 
垂直 居中 对 齐 效 果 如 图 4.18 所 示 。 




















Ds 











图 片 对 齐 效果 ， 图 片 对 齐 效果 





€ 3 C 9 fie//C/ampp/htdocs/4/4.3html 
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图 4.18 

















图 片 对 齐 效 单 ， 图 片 对 齐 效 洗 
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垂直 居 下 对 齐 效果 如 图 4.19 所 示 。 














团 片 对 齐 效果， 图 片 对 齐 效果 




















4.3.7 创建 图 像 映射 


图 像 映射 是 指 将 一 个 图 像 划 分 成 多 个 区 域 ， 每 一 个 区 域 都 可 以 指定 一 个 超 链 接 ， 点 击 不 
同 的 区 域 会 跳 转 到 不 同 地 址 。 图 像 映射 最 经 典 的 应 用 就 是 导航 地 图 ， 当 鼠标 移动 到 地 图 上 一 
个 区 域 时 ， 该 区 域 的 背景 颜色 呈现 为 灰色 ， 并 显示 当前 区 域 的 名 称 ， 如 图 4.20 所 示 。 












































































































































图 4.20 























在 HIML 中 ， 创 建 图 像 映射 的 关键 在 于 使 用 <map> 和 <area> 这 两 个 元 素 。<map> 元 素 用 于 
指定 图 像 映射 的 区 域 ， 必 须 为 其 指定 一 个 name 值 ， 该 值 用 于 在 <img> 元 素 中 设置 使 用 哪个 图 
像 映射 ，<area> 元 素 用 于 在 图 像 地 图 中 划分 作用 区 域 。 
个 <map> 元 素 中 可 以 有 多 个 <area> 元 素 ， 每 个 <area> 元 素 指 定 一 个 映射 区 域 。<area> 元 
素 中 有 两 个 非常 重要 的 属性 ，shape 和 coords。shape 用 于 指定 映射 区 域 的 形状 ， 目 前 可 以 设 定 
的 值 有 矩形 (rect) 、 圆 形 〈circle) 和 多 边 形 〈poligon) ，coords 用 于 指定 坐标 点 ， 详 细 使 
方法 如 下 : 
<area shape="rect" coords="X1, y1,x2,y2" hrefurl> 表 示 设 定 热点 的 形状 为 矩 
点 坐标 为 (xl,y1》， 右 下 角 项 点 坐标 为 (x2,y2) 。 
<area Shape='"circle" coords="x1, yl.r" hre 人 url> 表 示 设 定 热点 的 形状 为 圆 形 ， 圆 心 坐标 为 
(xlLy1) ， 半 径 为 r。 
<area shape="poligon" coords="x1. y1,xX2,y2 ...... " href=url> 表 示 设 定 热点 的 形状 为 多 边 形 ， 
各 顶点 坐标 依次 为 (xl,y1) 、 (x2.y2) 、 (x3,y3) 
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在 Dreamweaver 中 ， 通 过 可 视 化 操作 ， 可 以 非常 方便 地 为 图 像 创建 映射 ， 详 细 操 作 步 又 
如 下 : 











在 Dreamweaver 中 插入 一 幅 图 像 。 


加 切换 到 设计 视图 ， 选 中 插入 的 图 像 ， 在 窗口 的 下 面 的 属性 面板 中 可 以 看 到 用 于 设置 
映射 的 区 域 ， 如 图 4.21 所 示 。 









~ 于 四 376 | sv 着 护 加 [中 
PINTOAN EVE -~® 











图 4.21 








辆 单 击 绘制 圆 形 映 射 的 图 标 EO， 在 插入 的 图 形 中 绘制 一 个 圆 形 ， 然 后 单 击 全 图标， 移 
动 圆 形 到 合适 的 位 置 ， 效 果 如 图 4.22 所 示 。 


用 同样 的 方法 绘制 其 他 映射 区 域 ， 效 果 如 图 4.23 所 示 。 
图 4.22 


(5) 用 鼠标 选中 一 个 绘制 的 映射 区 域 ， 在 属性 面板 中 的 “链接 ”位 置 输入 一 个 链接 地 
址 ， 这 样 当 鼠标 单 击 该 区 域 位 置 时 ， 就 会 跳 转 到 指定 的 页 面 ， 效 果 的 图 4.24 所 示 。 











图 4.23 




























































































性 
图 ba rn - 思 回 天 
Nm | 
Do 
图 4.24 


























(6) 用 同样 的 方法 为 其 他 映射 区 域 添加 链接 地 址 ， 切 换 到 代码 视图 ， 我 们 可 以 看 到 如 
下 所 示 代 码 : 











<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>4.3</title> 
</head> 

<body> 


<img src="img/imgmap.png" alt="" width="378" height="332" usemap="#Map"/> 
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<map name="Map"> 
<area shape="circle" coords="184,49,33" href="area01.html"> 
<area shape="circle" coords="305,137,25" href="area02 .htm1"> 
<area shape="circle" coords="185,174,47" href="area00 .html1"> 
<area shape="circle" coords="260,275,32" href="area03.html"> 
<area shape="circle" coords="111,276,37"” href="area04.html"> 
<area shape="circle" coords="65,135,36" href="area05.html"> 

</map> 

</map> 

</body> 

</html> 


不 难看 出 ， 使 用 Dreamweaver 创 建 的 图 像 映射 ， 其 实质 还 是 以 代码 的 形式 来 创建 的 。 在 实 
际 的 使 用 过 程 中 ， 为 了 提高 工作 效率 和 准确 性 ， 使 用 Dreamweaver 比 直接 使 用 代码 效率 更 高 。 































































































4:4 使 用 超 链接 














超 链 接 是 网 站 中 使 用 非常 频繁 的 一 种 HTML 元 素 ， 网 站 中 的 多 个 网 页 就 是 通过 超 链 接 实 
现 了 页 面 间 的 相互 跳 转 。 下 面 将 详细 介绍 HTML 中 超 链 接 的 使 用 方法 。 


4.4.1 链接 语法 
超 链 接 用 <a> 标 签 来 表示 ， 其 基本 语法 如 下 所 示 : 


<a href="url"> 超 链接 </a> 


其 中 href 属 性 用 于 指定 链接 目标 ， 链 接 目 标 可 以 是 另 一 个 文档 的 位 置 ， 也 可 以 是 当前 文 
档 的 书签 ， 也 称 为 锚 。 开 始 标 签 和 结束 标签 之 间 的 部 分 是 超 文 本 链接 的 内 容 。 

在 超 链接 中 ，name 属 性 规定 错 的 名 称 。name 属 性 用 于 创建 HTML 内 部 的 书签 。 书 签 不 会 
以 任何 特殊 方式 显示 ， 它 对 读者 是 不 可 见 的 。 当 使 用 命名 锚 时 ， 我 们 可 以 创建 直接 跳 至 页 面 
中 某 个 节 的 链接 ， 这 样 就 可 以 非常 方便 地 为 页 面 创 建 目录 。 


















































































































































































































































4.4.2 target 属 性 


<a> 元 素 的 target 属 性 用 于 指定 在 何 处 打开 链接 文档 。 如 果 在 一 个 <a> 标 签 内 包含 一 个 
target 属 性 ， 浏 览 器 将 会 载 入 和 显示 用 这 个 标签 的 href 属 性 命名 的 、 名 称 与 这 个 目标 吻合 的 框 
架 或 者 窗口 中 的 文档 。 如 果 这 个 指定 名 称 或 id 的 框架 或 者 窗口 不 存在 ， 浏 览 器 将 打开 一 个 新 
的 窗口 ， 给 这 个 窗口 一 个 指定 的 标记 ， 然 后 将 新 的 文档 载 入 这 个 窗口 。 从 此 以 后 ， 超 链接 文 
档 就 可 以 指向 这 个 新 的 窗口 。 
target 属 性 有 4 个 保留 的 目标 名 称 用 作 特 殊 的 文档 重 定向 操作 ， 这 4 个 值 分 别 如 下 。 
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入 并 
































(1) _blank: 浏览 器 总 在 一 个 新 打开 、 未 命名 的 窗口 中 载 入 目标 文档 。 









































(2) _self; 这 个 目标 的 值 对 所 有 没有 指定 目标 的 <a> 标 签 是 默认 的 ， 它 使 得 目标 























文档 载 


fF 显示 在 相同 的 框架 或 者 窗口 中 作为 源 文档 。 这 个 目标 是 多 余 且 不 必要 的 ， 除 非 和 文档 标 














题 <base> 标 签 中 的 target 属 性 一 起 使 用 。 















































(3) _parent: 这 个 目标 使 得 文档 载 入 父 窗口 或 者 包含 来 超 链 接 引 用 的 框架 的 框架 集 。 















































如 果 这 个 引用 是 在 窗口 或 者 顶级 框架 中 ， 那 么 它 与 目标 _self 等 效 。 


包含 的 框架 并 将 文档 载 入 整个 浏览 
意 的 是 ， 这 些 值 都 是 以 下 划 线 开头 的 ， 所 以 在 设置 target 窗 口 或 目标 时 ， 不 能 以 下 
划 线 为 


4.4.3 id 属性 


3 个 















































(4) _top: 这 个 目标 使 得 文档 载 入 包含 这 个 超 链接 的 窗口 ， 用 _top 目 标 将 会 清除 所 有 被 
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mm 





















































头 设置 任何 框架 的 name 或 id 的 值 ， 否 则 浏览 器 将 忽略 这 些 字符 。 
































<a> 标 记 的 id 属性 可 创建 一 个 HTML 文 档 的 书签 标记 。 例 如 下 面 这 段 代码 : 





























<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>4.3</title> 

</head> 

<body> 

<h2 id="sec01"> 第 一 节 </h2> 

这 是 第 一 节 中 的 内 容 。<br> 

<a href="#sec01">1</a>-<a href="#sec02">2</a>-<a href="#sec03">3</a> 
<br><br><br><br><br><br><br><br><br><br><br><br> 

<h2 id="sec02"> 第 二 节 </h2> 

这 是 第 二 节 中 的 内 容 。<br> 

<a href="#sec01">1</a>-<a href="#sec02">2</a>-<a href="#sec03">3</a> 
<br><br><br><br><br><br><br><br><br><br><br><br> 

<h2 id="sec03"> 第 三 节 </h2> 

这 是 第 三 节 中 的 内 容 。<br> 

<a href="#sec01">1</a>-<a href="#sec02">2</a>-<a href="#sec03">3</a> 
</body> 

</html> 














扩 耐 旦 











在 这 段 代 码 中 ， 一 个 页 面 设置 了 多 个 标题 ， 每 个 标题 下 面 都 有 一 段 文字 ， 文 字 的 





























日 轩 下 


超 链接 ， 它 们 的 href 属 性 分 别 指向 3 个 标题 的 id 属性 值 ， 这 样 就 在 HIMIL 文 档 中 创建 了 书签 



































标记 ， 点 击 对 应 的 超 链接 就 可 以 在 页 面 中 跳 转 到 对 应 的 标题 。 为 了 让 页 面 中 跳 转 的 效果 更 加 
明显 ， 添 加 了 很 多 的 <br> 标 签 。 效 果 如 图 4.25 所 示 。 
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第 一 节 
这 是 第 一 节 中 的 内 容 
IES 

















4.4.4 创建 图 片 链接 


片 超 链 接 的 方法 与 创建 文字 超 链接 的 方法 大 同 小 异 ， 将 <a> 元 素 的 内 容 部 分 换 成 <img> 标 签 民 














以 上 介绍 的 都 是 为 文字 创建 超 链接 ， 除 了 文字 以 外 ， 还 可 以 为 图 片 创 建 超 链 接 。 创 建 图 





























可 。 


例如 下 面 这 段 代 码 ; 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>4.3</title> 

</head> 

<body> 

<a href="#"><img src="img/img01.jpg" width="960" height="640" alt=""/></a> 
</body> 

</html> 


创建 图 片 链 接 其 实 就 是 在 网 页 中 插入 一 个 图 像 ， 然 后 再 给 这 个 图 像 创建 一 个 超 链 接 的 





















































过 程 。 


4.4.5 创建 电子 邮件 链接 


























电子 邮件 链接 是 指 当 用 户 点 击 页 面 中 的 一 个 超 链接 时 ， 将 会 启动 电子 邮件 客户 端 程 序 。 




















例如 下 面 这 段 代 码 : 





<a href="mailto:zhangsan@163.com"> 跟 我 联系 </a> 


当 用 户 点 击 “ 跟 我 联系 ”这 个 超 链接 时 ， 将 会 启动 电子 邮件 客户 端 程序 ， 新 建 一 封 准备 





























往 zhangsan(@163.com 的 电子 邮件 ， 此 时 收 件 人 地 址 默认 为 zhangsan@163.com。 












































这 里 需要 注意 的 是 ， 只 有 当 用 户 的 电脑 安装 了 电子 邮件 客户 端 程序 才能 使 用 该 功能 。 
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和 45 创建 用 户 信息 页 面 























文本 、 图 像 和 超 链 接 是 HTML 页 面 中 使 用 最 多 的 3 种 元 素 ， 掌 握 这 些 元 素 的 使 用 方法 ， 就 
可 以 创建 一 个 有 模 有 样 的 HTML 页 面 。 本 节 内 容 主要 根据 前 面 所 学 知识 ， 创 建 一 个 用 户 信息 
展示 的 HTML 页 面 ， 最 终 效果 如 图 4.26 所 示 。 详 细 操 作 步 又 如 下 : 












































































































































在 Dreamweaver 中 新 建 一 个 空白 的 HTML 页 面 。 

园 分 析 如 图 4.25 所 示 效 果 ， 我 们 可 以 用 <img> 标 记 插 入 图 片 ， 用 于 展示 用 户 照片 。 基 本 
信息 的 分 类 标题 可 以 用 <h3> 标 记 展 示 ， 如 “基本 信息 ”“ 学 校 信息 ”和 “个 人 信息 ”。 照 片 
下 面 与 用 户 互动 的 文字 可 以 设置 为 超 链接 ， 当 击 这 些 超 链接 的 时 候 ， 跳 转 到 其 他 页 面 。 其 余 
的 文字 信息 可 以 用 段落 标记 <p> 或 者 文本 格式 化 标记 。 

辆 页 面 基 础 布局 。 该 页 面 整 体 可 以 分 为 左右 结构 两 部 分 ， 左 侧 又 可 以 再 分 为 上 中 下 结 
构 3 部 分 ， 我 们 分 别 用 div 标 记 表 示 各 个 部 分 。 为 了 让 各 个 部 分 看 的 更 清晰 ， 我 们 为 每 个 div 标 
记 设置 了 背景 颜色 ， 相 关 代 码 如 下 所 示 ; 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 用 户 信息 展示 </title> 

<style> 

body { font:12px "宋体 ", "Arial Narrow", HELVETICA; margin:0;} 

#container {margin:0 auto; width:550px; } 

#sidebar { float:left; width:225px; height:500px;background-color:#D1A3A4; 
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#content { Eloat:right: width:325px; 


Color:#DBF1F1;} 


</style> 
</head> 
<body> 
<div id="container"> 
<div id="sidebar"> 
上 面 用 img 元 素 显示 图 像 <br> 
中 间 用 div 元 素 显 示 多 个 超 链接 <br> 
下 面 用 table 显 示 基 本 信息 
</div> 
<div id="content"> 
这 里 用 table 显 示 用 户 信息 
</div> 
</div> 
</body> 
</html> 


在 浏览 器 中 查看 效果 ， 如 图 4.27 所 示 。 
<img src="img/img02.png"> 


在 浏览 器 中 查看 效果 ， 如 图 4.28 所 示 。 
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图 4.27 
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加 在 img 元 素 下 面 创建 一 个 div 元 素 ， 
b 标 记 加 粗 这 些 字体 ， 相 关 代码 如 下 : 

















<style> 


img 元 素 在 左 侧 插 入 图 像 ， 相 关 代 码 如 下 所 示 : 
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height:500px; background- 
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图 4.28 











这 个 div 元 素 内 嵌 了 两 个 超 链 接 和 一 个 邮件 地 址 ， 


#1linkitems{float:left; width:225px; margin:10pPx 0; padding-left:15px; } 


a{text-decoration:none;} 
</style> 
<div id="linkitems"> 
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<B><a hre "> 向 她 打招呼 </a></B><br> 
<B><a hre mailto:zhangsan@lycn.com "> 发 站 内 信 </a></B><br> 
<B><a href="#"> 送 她 礼物 </a></B><br> 

</div> 


在 浏览 器 中 查看 效果 ， 如 图 4.29 所 示 。 
四 在 起 链接 的 下 面 添 加 一 个 table 标 记 ， 用 于 显示 一 些 基本 信息 ， 相 关 代 码 如 下 ; 


<style> 
table{ margin-left:10px;} 
.tqdleft{text-align:left; color:#2B7BB5} 
.tdright{text-align:right; font-weight:bold;} 
</style> 
<table id="tableA"> 
<tr><td class="tdright"> 所 在 学 校 : </td><td class="tdleft"> 中 国 XX 大 学 </ 
td></tr> 
<tr><td class="tdright"> 生 日 : </td><td class="tdleft">1985 年 3 月 12 日 </ 
td></tr> 
<tr><td class="tdright"> 家 乡 : </td><td class="tdleft"> 中 国 西安 </td></ 


















































tr> 
<tr><td class="tdright"> 等 级 : </td><td class="tdleft">12 级 </td></tr> 
</table> 


在 浏览 器 中 查看 效果 ， 如 图 4.30 所 示 。 


(7) 在 右 侧 的 div 元 素 中 添加 一 个 table 元 素 ， 使 用 也 标记 显示 用 户 信息 分 类 的 标题 ， 使 
td 标记 显示 用 户 基 本 信息 ， 相 关 代码 如 下 : 


<style> 
.thtitle{text-align:1left} 
#tableB tr {height:22px;} 
</style> 
<table id="tableB"> 
<tr><th colspan="2" class="thtitle"><h3> 基 本 信息 </h3></th></tr> 
<tr><td class="tdright"> 性 别 : </td><td class="tdleft"> 女 </td></tr> 
<tr><td class="tdright"> 生 日 : </td><tqd class="tdleft">1985 年 3 月 12 日 </ 
tar<Htr> 
<tr><td class="tdright"> 家 乡 : </td><td class="tdleft"> 中 国 西安 </td></tr> 
<tr><th colspan="2" class="thtitle"><h3> 学 校 信息 </h3></th></tr> 
<tr><td class="tdright"> 大 学 : </td><td class="tdleft">XX 大 学 XX 专业 </ 




























































































td></tr> 

<tr><td class="tdright"> 高 中 : </td><td class="tdleft">XX 中 学 - 2003 年 </ 
td></tr> 

<tr><td class="tdright"> 初 中 : </td><td class="tdleft">XX 中 学 - 2000 年 </ 
td></tr> 

<tr><td class="tdright"> 小 学 : </td><td class="tdleft">XX 小 学 - 1997 年 </ 
td></tr> 


<tr><th colspan="2" class="thtitle"><h3> 学 校 信息 </h3></th></tr> 
<tr><td class="tdright"> 兴 趣 爱 好 : </td><td class="tdleft"> 唱 歌 跳舞 </ 
td></tr> 
<tr><td class="tdright"> 喜 欢 音乐 : </td><td class="tdleft"> 民 谣 歌 曲 </td></ 
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<tr><td class="tdright"> 喜 欢 电 影 : </td><td class="tdleft"> 科 幻 电 影 </td></ 


<tr><td class="tdrightn> 玩 的 游戏 : </td><td class="tdleft"> 策 略 游戏 </td></ 


<tr><td class="tdright"> 喜 欢 动漫 : </td><td class="tdleft"> 日 本 动漫 </td></ 


<tr><td class="tdright"> 喜 欢 运动 : </td><td class="tdleft"> 跑 步 </td></tr> 
<tr><td class="tdright"> 喜 欢 书 籍 : </td><td class="tdleft"> 古 典 名 著 </td></ 


</table> 


在 浏览 器 中 查看 效果 ， 如 图 4.31 所 示 。 
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图 4.31 




















(8) 将 左 侧 背 景色 修改 成 与 右 侧 背 景色 相同 的 样式 ， 相 关 代码 如 下 : 





#sidebar { float:left; width:225px height:500px;background-color:#DBF1F1; 








团 


页 面 最 终 效果 如 图 4.26 所 示 。 























53 


第 5 章 使 用 表格 与 列表 
组 织 内 容 


表格 和 列表 是 HTML 页 面 中 用 于 组 织 页 面 内 容 的 重要 元 素 ， 无 论 是 文字 、 图 片 或 是 其 他 
素材 ， 都 可 以 使 用 表格 或 者 列表 进行 合理 的 组 织 和 布局 。 




























































































5.1 插入 表格 



































在 HTML 中， 表格 是 组 织 页 面 内容 的 重要 元 素 之 一 。 在 早期 的 HTML 页 面 布局 中 ， 
表格 发 挥 了 重要 的 作用 ， 下 面 我 们 就 来 详细 介绍 表格 的 使 用 方法 。 


5.1.1 表格 的 作用 


在 早期 的 HTML 页 面 中 ， 表 格 经 常会 用 于 网 页 布局 。 打 开 网 页 的 HTML 代 码 ， 随 处 可 见 
表格 以 及 表格 中 嵌 套 的 表格 ， 使 用 表格 的 目的 只 有 一 个 ， 那 就 是 布局 一 个 非常 漂亮 的 网 页 。 
随 着 技术 的 发 展 和 对 网 页 结构 的 要 求 更 高 ， 现 在 的 表格 已 经 不 再 承担 页 面 布局 的 作用 ， 
是 作为 承载 数据 的 容器 ， 因 为 表格 排列 数据 的 功能 还 是 非常 完美 的 。 


5.1.2 表格 的 结构 


在 HIML 页 面 中 ， 表 格 用 <table> 标 签 表示 ， 除 此 之 外 ， 还 有 很 多 标签 表示 表格 的 结 
构 ， 详 细 如 下 所 示 : 


(1) <caption> 标 签 定义 表格 的 标题 。 
(2) <col> 标 签 为 表格 的 列 定义 属性 。 
(3) <colgroup> 标 签 定义 表格 列 的 分 组 。 
(4) <thead> 标 签 定义 表格 的 表 头 。 

(5) <th> 标 签 定义 表格 的 表 头 。 

(6) <tr> 标 签 定义 表格 的 行 。 

(7) <tfoot> 标 签 定义 表格 的 脚注 。 

(8) <tbody> 标 签 定义 表格 的 主体 。 

(9) <td> 标 签 定义 一 个 单元 格 。 
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以 下 代码 表示 了 一 个 表格 的 基本 结构 ， 表 格 在 HTML 页 面 中 显示 的 效果 如 图 5.1 所 示 。 
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€ 3 G DfileyC/test/yampp/htdocs/5/5.Lhtml 
洪 应 用 dreamweover cc 2 器 HTML 














Ea 年? 月 om ] 
[pols 年 7 有 118|200 | 
[as 年 7 月 12 日 so 

小 计 : 570 















































5.1.3 在 单元 格 中 添加 内 容 























<td> 标 签 用 于 定义 表格 中 的 单元 格 ，<td> 标 签 中 的 内 容 也 就 是 单元 格 中 将 要 显示 的 内 
容 。 如 果 <td> 元 素 中 的 内 容 是 文字 ， 那 么 表格 单元 格 中 的 内 容 就 会 显示 文字 ; 如 果 <td> 元 素 
中 内 容 是 图 片 ， 那 么 表格 单元 格 中 的 内 容 就 会 显示 图 片 ， 如 果 <td> 元 素 中 的 内 容 是 超 链接 ， 
那么 表格 单元 格 中 的 内 容 就 会 显示 超 链 接 ， 如 图 5.2 所 示 。 
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© | file///C/test/xampp/htdocs/5/5 2 html 
党 ) dreemweover cc2.. DHTML 


€ 





图 标 区 庆 入 | 











图 5.2 














表格 作为 承载 其 他 元 素 的 容器 ， 使 页 面 布局 达到 整齐 划一 的 效果 
中 显示 表格 ， 则 需要 为 表格 设置 边框 或 者 背景 色 。 























。 如 果 要 在 HIML 页面 























6.2 格式 化 表格 























在 HTML 页 面 中 ， 没 有 经 过 任何 修饰 的 表格 是 极其 丑陋 的 。 为 了 让 表格 与 其 承载 的 内 容 
都 能 以 漂亮 的 面貌 呈现 出 来 ， 就 需要 对 表格 进行 格式 化 处 理 。 


5.2.1 id 属 性 






































id 属性 规定 了 HTML 元 素 的 唯一 性 。 在 HIML 页 面 中 ， 绝 大 多 数 的 元 素 都 有 id 属性 。 如 
果 为 某 个 元 素 设 置 了 一 个 id 属性 值 ， 那 就 不 能 为 其 他 元 素 设 置 相同 的 属性 值 ， 否 则 当 使 
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JavaScript 或 者 CSS 样 式 的 时 候 ， 就 不 能 正确 获取 该 元 素 ， 无 法 对 其 进行 其 他 操作 。 


5.2.2 class 属 性 

















class 属 性 规定 了 元 素 的 类 名 。 在 一 个 网 页 中 ， 多 个 HTML 元 素 可 以 使 用 相同 的 class 属 性 














名 称 。class 属 性 大 多 数 时 候 用 于 指向 样式 表 中 的 类 ， 也 可 以 利 

















指定 class 的 HIML 元 素 。 


5.2.3 表格 的 宽度 和 高 度 



































它 通 过 JavaScript 来 改变 带 有 


默认 情况 下 ， 表 格 的 宽度 和 高 度 可 以 根据 单元 格 中 的 内 容 自动 调整 。 我 们 也 可 以 通过 设 
































置 表格 或 者 单元 格 的 宽度 和 高 度 ， 手 动 改变 表格 的 宽度 和 高 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>5.3</title> 
</head> 

<body> 








度 。 例 如 下 


面 这 段 代码 : 











<table border="]1l" cellspacing="0" width="400px" height="300px"> 


<tr height="50px"> 
<th width="50px"> 姓 名 </th> 
<th width="100px"> 家 庭 住址 </th> 
<th> 联 系 方式 </th> 

四 中 

ED 
<tqd height="100"> 张 三 </td> 
<td> 北 京 市 朝阳 区 </td> 
<td>18644446666</td> 

REE> 

<tr> 
<td> 李 四 </td> 
<tq> 北 京 市 海淀 区 </td> 
<td>13122225555</td> 
</tr> 

</table> 

</body> 

</html> 


这 段 代码 运行 后 的 效果 如 图 5.3 所 示 。 
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从 上 务 
行 的 高 度 可 
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时 





B file//c/test/xampp/htdocs/5/5 3 html 
党 应 出 品 deomweeverc2- 四 HTML 





站 名 | 守信 二 


联系 方式 





人 #E= | 


18644446666 








全 四 ~ 


13122225555 



































的 代码 中 可 以 看 出 ， 











图 5.3 














<table> 元 素 的 宽 


5.2.4 表格 与 单元 格 的 对 齐 





度 和 





高 度 可 以 控制 整个 表格 的 尺寸 ， 而 数据 


以 通过 <tr> 标 签 或 者 <td> 标 签 的 height 属 性 进行 设置 ， 数 据 列 的 宽度 可 以 通过 首 行 
单元 格 的 宽度 进行 设置 ， 如 <th> 标 签 或 者 <td> 标 签 。 
































默认 情况 下 ，<td> 标 签 中 单元 格 的 内 容 在 水 平方 向 上 左 对 齐 ， 垂 直方 向 上 居中 对 齐 ， 而 
<th> 标 签 中 单元 格 的 内 容 在 水 平方 向 上 居中 对 齐 ， 垂 直方 向 上 也 是 居中 对 齐 ， 如 图 5.4 所 示 。 








BD 
所 











几 种 。 


(1) left， 默 认 的 对 


器 全 口 d 





(2) night: 右 对 齐 


(3) center: 








居中 对 





(4) justify: 对 行进 行 伸 
谷 对 





(5) char: 将 内 容 


准 # 








© Dfile///C/test/xampp/htdocs/5/5.4.html 
jreammeaver ce 2 OO HTML 


| 齐 方式 ， 左 对 齐 内 容 。 
内 容 。 
齐 内 容 。 























在 HTML 中 ，align 属 性 控制 表格 单元 格 在 水 平方 向 上 的 对 齐 方式 ， 可 以 设置 的 值 有 以 下 








展 ， 这 样 每 
定 字符 


间 定 字符 














valign 属 性 控 


制 表 格 和 




















(1) top: 对 





行 都 可 以 有 相等 的 长 





尊 


元 格 内 容 在 垂直 方向 上 的 对 齐 方法 ， 可 以 设置 的 值 有 以 下 几 种 。 


内 容 进行 上 对 齐 。 
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(2) middle: 默认 对 齐 方式 ， 对 内 容 进行 居中 对 齐 。 
(3) bottom: 对 内 容 进行 下 对 齐 。 
(4) baseline: 与 基线 对 齐 。 









































如 果 设 置 单 元 格 的 align 属 性 为 justify， 单 元 格 中 的 内 容 会 以 两 端 对 齐 的 方式 展现 ， 但 是 


般 情况 下 很 少 用 到 ; 而 align 属 性 值 为 char 的 效果 ， 目 前 几乎 没有 浏览 器 支持 ，valign 属 性 值 
































seline 时 ， 只 有 单元 格 的 内 容 为 字母 ， 且 字号 各 不 相同 时 效果 才 会 明显 ， 实 








际 应 用 中 也 很 




































































该 行 所 有 的 单元 格 。 以 下 代码 列举 了 这 两 种 属性 在 单元 格 中 的 详细 使 


























5.5 所 示 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>5.4</title> 
</head> 
<body> 
<table border="]1" cellspacing="0" width="300px" height="200px"> 
<tr align="left" valign="top"> 
<th> 列 头 </th> 
<th> 列 头 </th> 
<th> 列 头 </th> 
过 /ERE> 
<tr> 
<td align="left" valign="top"> 数 据 </td> 
<td align="center" valign="middle"> 数 据 </td> 
<td align="right" valign="bottom"> 数 据 </td> 
</tr> 
<tr> 
<td> 数 据 </td> 
<td> 数 据 </td> 
<td> 数 据 </td> 
< Er 
</table> 
</body> 
</html> 


加 x 


€ 3 © Dfile///C/est/xampp/htdocs/5/5.4html 
dreomweover ce 2.. OJ HIML 





列 大 
































align 和 valign 属 性 可 以 在 <tr>、<th> 或 <td> 标 签 中 进行 设置 。 当 用 于 <tr> 标 签 时 ， 对 齐 属 























情况 ， 效 果 
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5.2.5 表格 边框 


框 


















































转 



























































下 代码 ， 


表格 的 边框 可 以 用 border 属 性 进行 控制 ，border 属 性 会 为 每 个 单元 格 应 用 边框 ， 并 用 边 

绕 表 格 。 如 果 border 属 性 的 值 发 生 改 变 ， 那 么 只 有 表格 周围 边框 的 尺寸 会 发 生变 化 。 在 
HIML 页面 中 插入 表格 时 ， 只 有 设置 了 表格 的 边框 属性 border， 才 能 显示 插入 的 表格 ， 例 如 以 

<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 
<title>5.5</title> 
</head> 
<body> 
<table border="lpx" width="300px" height="200px"> 
<tr> 
<th> 列 头 </th> 
<th> 列 头 </th> 
<th> 列 头 </th> 
SEE 
<tr> 
<td> 数 据 </tq> 
<td> 数 据 </td> 
<td> 数 据 </td> 
/Er 
</table> 
</body> 
</html> 


在 这 段 代 码 中 ， 我 们 设置 了 表格 的 border 属 性 为 ]px， 又 设置 了 表格 的 宽度 和 高 度 ， 效 果 

















如 图 5.6 所 示 。 


/test/xampp/htdocs/5/5.5.html 
2 OM 





























5.2.6 单元 格 间距 和 单元 格 边 距 





仔细 观察 表格 的 边框 ， 我 们 可 以 看 到 单元 格 之 间 、 单 元 格 与 表格 边框 之 间 都 有 一 个 间 








隙 ， 这 个 间隙 被 称 为 单元 格 间距 ， 可 以 通过 cellspacing 来 设置 单元 格 的 间距 。 例 如 设置 单元 格 
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的 间距 为 0， 可 以 让 表格 的 边框 看 起 来 更 窒 ， 相 关 代 码 如 下 : 
<table border="lpx" width="300px" height="200px" cellspacing="0"> 


添加 以 上 代码 后 ， 表 格 的 效果 如 图 5.7 所 示 。 




















C |D fle///C/tes/xampp/htdocs/5/5.5.html 
深 应 而 “ 门 dreamweaver ce 2 器 HTML 














本 









































前 看 起 来 表格 的 边框 有 些 粗 ， 并 不 像 我 们 设置 的 1 个 像素 那么 宽 ， 这 是 因为 虽然 我 们 
设置 了 表格 的 边框 为 1 个 像素 ， 但 是 这 里 显示 的 却 是 两 个 <td> 的 边框 。 因 为 <td> 之 间 并 没有 和 


























合 ， 要 想 看 到 1 个 像素 边框 的 效果 ， 需 要 设置 表格 的 border-collapse 属 性 为 collapse， 例 如 下 面 
的 代码 : 
































<table border="lpx" width="300px" height="200px" cellspacing="0" 
style="border-collapse:collapse"> 


添加 以 上 代码 后 ， 表 格 的 边框 就 显示 为 真正 的 1 个 像素 宽度 ， 效 果 如 图 5.8 所 示 。 


Dss 


\ ~ © Dfile///C/test/xampp/htdocs/5/5.5.html 
洪 应 而 [0] dreamweever ce2.。 HTML 





列 头 列 头 

















图 5.8 





























单元 格 的 边 距 表示 单元 格 的 内 容 与 单元 格 边 的 距离 ， 可 以 使 用 cellpadding 属 性 进行 设 
置 。 例 如 添加 以 下 代码 ， 设 置 数据 单元 格 边 距 为 13px， 单 元 格 中 的 文本 将 与 边框 保持 15 个 像 
素 的 距离 ， 效 果 如 图 5.9 所 示 。 




















<table border="lpx" width="300px" height="200px" cellpadding="15px" 
cellspacing="0" style="border-collapse:collapse"> 
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EES 
€ 3 C Dfile///c/test/xampp/htdocs/5/5.5html 


洪 应 BD dreamweever ee 2 I HTML 








列 头 





列 头 列 头 





























5.2.7 表 头 



























































表格 中 的 表 头 用 <th> 标 签 来 定义 ， 多 数 浏览 器 会 将 表 头 显 示 为 粗 体 
果 我 们 在 前 面 的 案例 中 
有 























四 


居中 的 文本 ， 这 些 效 
已 经 看 到 了 。 通 常情 况 下 ， 表 头 的 排列 方式 分 两 种 ， 一 种 是 水 
表格 的 第 一 行 ， 相 关 代 码 如 下 所 示 ， 效 果 如 图 5.10 所 示 。 


显示 
<table border="1PX" 





width="300px" height="200px" cellspacing="0" 
style="border-collapse:collapse"> 

和 
<th> 表 头 </th> 

<th> 表 头 </th> 


<th> 表 头 </th> 
xhERS 


EEC> 


<td> 数 据 </td> 
<td> 数 据 </td> 


<td> 数 据 </td> 
</tr> 


</table> 


Ds 
”Ns 


@ DO file///c/test/xampp/htdocs/5/5.6.html 
DD doneiver et 2 I HTML 





表 关 表 头 表 头 





























图 5.10 








另 一 种 是 垂直 显示 在 表格 的 第 一 列 ， 相 关 代码 如 下 所 示 ， 效 果 如 


<table border="1PX" 

















图 5.11 所 示 。 
height="200px" 





width="300pzx" 
style="border-collapse:collapse"> 
< 





cellspacing="0" 











第 5 章 使 用 表格 与 列表 组 织 内 容 





<th> 表 头 </th> 
<td> 数 据 </td> 
<td> 数 据 </td> 
< 外 到 > 
<EP> 
<th> 表 头 </th> 
<td> 数 据 </td> 
<td> 数 据 </td> 
</tr> 
</table> 
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于 向 用 0] dreamweaver cc 2 C3 HTML 


去 类 图 pm 
到 类 jm 




















图 5.11 






































更 加 复杂 的 表 头 需要 用 到 表格 的 嵌 套 ， 以 及 colspan 和 rowspan 属 性 ， 我 们 将 在 5.2.9 节 进行 
详细 介绍 。 














5.2.8 nowrap 属 性 

















nowrap 属 性 用 于 控制 单元 格 中 的 内 容 是 否 自动 换行 ， 当 nowrap 属 性 值 为 true 时 表示 人 允许 
换行 ， 当 nowrap 属 性 值 为 false 时 表示 禁止 换行 。 需 要 注意 的 是 ，nowrap 属 性 仅 在 没有 设置 
width 属性 时 起 作用 ， 如 果 设 置 了 单元 格 的 width 属性 ，nowrap 属 性 就 没有 效果 了 。 
























































5.2.9 colspan 和 rowspan 属 性 








colspan 和 rowspan 属 性 能 够 改变 表格 的 外 观 ， 使 某 列 或 者 行 合并 起 来 。 这 两 个 属性 作用 于 
<td> 标 签 上 ，colspan 属 性 可 以 对 任意 行进 行 设置 ， 使 其 跨越 多 列 ， 而 rowspan 可 以 对 第 一 列 进 
行 设置 ， 使 其 跨越 多 行 。 

例如 ， 以 下 代码 是 colspan 跨 越 多 列 的 效果 ， 如 图 5.12 所 示 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>5 7</EiEle> 

</head> 

<body> 

<table border="lpx" width="300px" height="200px" cellspacing="0" 
style="border-collapse:collapse"> 
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<Er> 
<th colspan="2"> 表 头 </th> 
<th> 表 头 </th> 
< EE 
<tr> 
<td> 数 据 </td> 
<td> 数 据 </td> 
<td> 数 据 </td> 
SEE 这 
</table> 
</body> 
</html> 
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于 自用 0 dreamweaver cc 3-， 记 HTML 

















图 5.12 














以 下 代码 是 rowspan 跨 越 多 行 的 效果 ， 如 图 5.13 所 示 。 











<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>5.7</title> 
</head> 
<body> 
<table border="]lpx" width="300px" 
style="border-collapse:collapse"> 
EE 
<th rowspan="2"> 表 头 </th> 
<td> 数 据 </td> 
<td> 数 据 </td> 
</tr> 
<tr> 
<td> 数 据 </td> 
<td> 数 据 </td> 
</tr> 
</table> 
</body> 
</html> 





height="200px" 





cellspacing="0" 
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BE fle///C/test/xampp/ntdocs/5/57.html 


全 本 用 0 dreamweaver cc 2 CI HTML 








数据 地 据 





























5.2.10 背景 与 边框 颜色 























在 使 用 表格 展示 数据 的 时 候 ， 我 们 经 常会 为 表格 的 背景 和 边框 设置 颜色 ， 以 便 用 户 能 更 
































清晰 的 观察 数据 。 在 HTML 页面 中 ， 可 以 使 用 bgcolor 属 性 设置 颜色 。 如 果 要 为 整个 表格 设置 





























同一 个 背景 色 ， 可 以 为 <table> 标 签 设置 颜色 属性 ; 如果 要 为 某 一 行 设置 背景 色 ， 可 以 为 <tr> 

















标签 设置 颜色 属性 ， 如 果 要 为 某 个 单元 格 设置 颜色 属性 ， 可 以 直接 为 <th> 或 者 <td> 标 签 设置 
颜色 属性 。 表 格 边 框 的 颜色 可 以 通过 bordercolor 属 性 进行 设置 。 例 如 下 面 的 代码 ; 








<!dqoctype html> 
<html> 
<head> 
































<meta charset="utf-8"> 


<title>5.8</title> 
</head> 
<body> 


<table border="lpx" bordercolor="#F30F13" width="300px" height="200px" 
cellspacing="0" style="border-collapse:collapse;color:#FDFDFD" > 
<tr bgcolor="#006699"> 
<th> 表 头 </th> 
<th> 表 头 </th> 
<th> 表 头 </th> 


</ELS 


<tr bgcolor="#B6B6B6"> 
<td> 数 据 </td> 
<td> 数 据 </td> 
<td> 数 据 </td> 


</EL> 


<tr bgcolor="#D89898"> 
<td> 数 据 </td> 
<td> 数 据 </td> 
<td> 数 据 </td> 


</Er> 
</table> 
</body> 
</html> 
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在 这 段 代码 中 ， 使 用 bordercolor 属 性 为 表格 设置 了 边框 颜色 ,使 用 bgcolor 属 性 为 每 行 数 
据 设置 了 背景 颜色 ,效果 如 图 5.14 所 示 。 






































© Bfle//c/test/xampp/ntdocs/5/5.8.html 
型 本 用 0 dreamweaver cc 2 HTML 




















5.2.11 背景 图 像 


在 HTML 页 面 中 可 以 使 用 background 属 性 为 表格 添加 背景 图 像 。 可 以 为 整个 表格 添 力 
一 的 背景 图 像 ， 也 可 以 为 单独 某 一 行 数据 添加 统一 的 背景 图 像 ， 甚 至 可 以 为 某 个 指定 的 单 
格 添加 单独 的 背景 图 像 。 例 如 下 面 这 段 代 码 ， 分 别 为 整个 表格 、 第 1 行 以 及 第 2 行 第 1 列 单 
格 添 加 了 背景 图 像 ， 效 果 如 图 5.15 所 示 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>5.9</title> 
</head> 
<body> 
<table border="]lpx" width="300px" height="200px" cellspacing="0" 
style="border-collapse:collapse; background:url (img/img04.png)" > 
<tr style="background:url (img/img02.png)"> 
<th> 表 头 </th> 
<th> 表 头 </th> 
<th> 表 头 </th> 
</Er> 
EE> 
<td background="img/img03.png"> 数 据 </td> 
<td> 数 据 </td> 
<td> 数 据 </td> 
<AEES 
</table> 
</body> 
</html> 
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€ 3 G Pfile///C/test/xampp/htdocs/5/5.9.html 


全 本 胃口 dreamweavercc 2-， CI HTML 




















J 


» 


5.3 制作 表格 




















在 HTML 页 面 设 计 中 ， 表 格 经 常 被 用 于 展示 数据 和 页 面 布局 。 随 着 Web 技 术 的 不 断 发 
展 ， 表 格 的 应 用 已 经 越 来 越 少 ， 但 是 在 某 些 情况 下 ， 我 们 依然 需要 使 用 表格 来 满足 设计 的 要 
求 。 本 节 将 着 重 介绍 如 何 制作 如 图 5.16 所 示 的 表格 。 

























































































EE * 
sn © Dfile///C/xampp/htdocs/5/5.9-1.html 
号 应 用 [dreamweeverc 2-， 总 HTML 


2015 年 部 门 评分 表 





图 5.16 


加 新 建 一 个 HTML 页 面 ， 在 body 元 素 中 嵌入 一 个 table 元 来 ， 实 现 基本 的 行列 功能 。 设 
置 表格 的 caption 为 “2015 年 部 门 评分 表 ”，thead 标 签 表示 表 头 为 “部 门 名 称 ” 和 12 个 月 份 ， 
tfoot 标 签 表示 部 门 统计 结果 ， 相 关 代码 如 下 : 


<!ldoctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>5.9-1</title> 
</head> 

<body> 

<table border="1"> 
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在 浏览 器 中 浏览 这 段 代码 的 效果 ， 如 图 5.17 所 示 。 





QQ、 | 网 站 制作 、 发 布 与 维护 技术 实战 








门 评分 表 
5 月 [6 月 [7 月 [8 月 
I6 | 8 






















































































































































































图 5.17 























后 的 第 1 行 合并 ， 相 关 代码 如 下 所 示 : 


<thead> 

<tr> 
<th rowspan="2"> 部 门 名 称 </th> 
<th colspan="12">2015 年 </th> 

</tr> 

< 让 关 
<th>1 月 </th> 
<th>2 月 </th> 
<th>3 月 </th> 
<th>4 月 </th> 
<th>5 月 </th> 
<th>6 月 </th> 
<th>7 月 </th> 
<th>8 月 </th> 
<th>9 月 </th> 
<th>10 月 </th> 
<th>11 月 </th> 
<th>12 月 </th> 

</tr> 

</thead> 


刷新 浏览 器 ， 效 果 如 图 5.18 所 示 。 














所 © Dfile///C:/xampp/htdocs/5/5.9-1.html 
让 应 用 “ 门 dreamweaver cc2... 癌 HTML 
2015 年 部 门 评分 表 
2015 年 
4 月 |5 月 |6 月 [7 月 |8 月 
性 产 部 le 6 fr 
品 管 部 
销售 部 
市 场 部 
院 计 








部 门 名 称 

















































































































































































































图 5.18 
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园 下 面 我 们 对 表 头 进行 修改 ， 除 了 第 1 行 第 1 列 外 ， 将 其 他 表 头 拆 分 成 两 行 ， 并 将 拆 分 


学 
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园 表格 的 基本 结构 已 经 形成 ， 但 是 这 样 的 表格 看 起 来 很 卫 ， 我 们 通过 设置 表格 的 宽 
高 度 、 边 框 、 对 齐 方式 、 背 景色 等 属性 ， 对 表格 进行 美化 ， 相 关 代码 如 下 : 


<style> 

*{margin:0 auto} 

tablef 

font-size:12px; 

width:800px; 

上 

table caption{font-size:24px;} 

七 able tr tdi{ 

padding:5px; 

background-color:#D6E9F0; 
text-align:center; 

站 

七 able tr thf{ 

padding:5px; 

background-color:#D6E9FO0; 

} 

.thmain{background-color:#66A9BC;} 
.tdmain{background-color:#91C5D3; text-align:left;} 
.tdcount {background-color:#B0CC7F;} 
.tdresult{background-color:#D7E1C8; text-align:center;} 
</style> 

"> 部 门 名 称 </th> 
12">2015 年 </th> 






<th class hmain" rowspan 

<th class="thmain" colspan 

<tfoot> 

<tr> 
<td class="tdcount"> 统 计 </td> 
<td class="tdresult">1</td> 
<td class="tdresult">2</td> 
<td class="tdresult">3</td> 
<td class="tdresult">4</td> 
<td class="tdresult">5</td> 
<td class="tdresult">6</td> 
<td class="tdresult">7</td> 








SQL tdresult">8</td> 
<td tdresult">9</td> 
<td tdresult">10</td> 
<td class="tdresult">11</td> 
<td class="tdresult">12</td> 
/Er> 

</tfoot> 


<td class="tqdmain"> 生 产 部 </td> 


<td class="tqdmain"> 品 管 部 </td> 





| 
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<td class="tdmain"> 销 售 部 </td> 


<td class="tdmain"> 市 场 部 </td> 


刷新 页 面 后 的 效果 如 图 5.19 所 示 。 





























se x 
¢ 3 C 0 fle///C/xampp/htdocs/5/5.9-Lhtml 
器 应 用 门 dreamweaver cc 2 HTML 





2015 年 部 门 评分 表 














明 
日 
5 
日 
6 
和 





加 修改 页 面 中 的 数据 ， 最 终结 果 如 图 5.16 所 示 。 


5.4 插入 列表 









































列表 是 HTML 中 另 一 个 用 于 组 织 内 容 的 工具 ， 结 合 CSS 的 使 用 ， 它 不 仅 可 以 制作 各 种 功 

















能 菜单 ， 还 可 以 用 于 布局 页 面 内 容 。 列 表 的 种 类 有 3 种 ， 分 别 为 有 序列 表 、 无 序列 表 和 定义 












































列表 ， 下 面 我 


5.4.1 有 序列 表 


~ 














门 就 详细 介绍 这 3 种 列表 的 使 用 方法 。 




















有 序列 表 用 <ol> 标 签 表示 ， 每 个 列表 项 





<1i> 标 签 表 示 ， 这 样 组 织 的 内 容 在 每 一 个 列表 























项 前 面 都 有 一 个 序号 ， 例 如 下 面 的 代码 : 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>5.10</title> 
</head> 
<body> 
<ol> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
</o1> 
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</body> 

</html> 

在 这 段 代 码 中 ， 有 序列 表 中 有 3 个 <1> 元 素 ， 每 个 元 素 的 内 容 都 一 样 ， 且 标签 前 面 没有 序 
号 ， 但 是 在 页 面 浏览 的 时 候 ， 这 些 标 签 前 面 就 会 出 现 序号 ， 如 图 $.20 所 示 ， 这 就 是 有 序列 表 
的 一 个 明显 特征 。 



























































CC DD file///C:/test/xampp/htdocs/5/5.10.html 
尝 应 用 [0 dreamweaver cc 2.， 口 HTML 











图 5.20 














默认 情况 下 ， 有 序列 表 以 数字 为 序号 ， 我 们 还 可 以 通过 设置 它 的 type 属 性 修改 序号 类 
型 .例如 使 用 <ol type="a"> 修 改 序号 为 小 写字 母 ， 使 用 <ol type="A"> 修 改 序号 为 大 写字 母 ， 使 
<ol type="i"> 修 改 序号 为 小 写 罗马 数字 ， 使 用 <ol type="I"> 修 改 序号 为 大 写 罗马 数字 。 另 外 
通过 设置 <ol> 标 签 的 start 属 性 ， 还 可 以 设置 有 序列 表 的 起 始 序号 。 例 如 ，<ol start="5"> 表 示 有 
序列 表 的 序号 从 5 开始 。 例 如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>5.10</title> 

</head> 

<body> 

<h2> 数 字 序号 列表 </h2> 

<ol type="1"> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 

</ol> 

<h2> 小 写字 母 序号 列表 </h2> 

<ol type="a"> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 

</o1> 

<h2> 大 写字 母 序号 列表 </h2> 

<ol type="A"> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 

</o1> 

<h2> 小 写 罗马 数字 序号 列表 </h2> 


<ol type="i"> 
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</o01> 


</o01> 


</o01> 
</body> 
</html> 


运行 这 段 代码 后 的 效果 如 


<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 


<h2> 大 写 罗马 数字 序号 列表 </h2> 
<ol type="I"> 

<1i> 项 目 </1i> 

<1i> 项 目 </1i> 

<1i> 项 目 </1i> 


<h2> 从 5 开始 的 数字 序号 列表 </h2> 

<ol start=73n 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 





图 5. 











E 


21 所 示 。 


小 写字 母 序号 列表 


项 目 


项 
项 目 
< 项目 


大 写字 母 序号 列表 


马 数字 序号 列表 


从 5 开始 的 数字 序号 列表 


5 项目 
到 项 目 
区 项 目 


5.4.2 无 序列 表 














€ 于 C 下 /Ciest/xampp/htdocw5/5l0htm 














El 








有 序列 表 相 对 应 的 是 无 序列 表 ， 无 序列 表 没 有 具体 的 序列 号 














， 天 


些 符号 进行 标记 

















的 。 无 序列 表 
行 标记 ， 默 认 














<ul> 标 签 表 示 ， 每 
青 况 下 以 实心 








员 











进行 标记 ， 我 








个 列表 项 








1 





仍然 
] 还 可 








的 符号 。 例 如 ，<ul type="circle"> 表 示 空 心 
关 代 码 如 下 所 示 : 








员 








<li> 标 签 表 示 。 无 序 





义 通过 设置 <ul> 标 签 





列表 可 
的 type 属 1 








列表 ，<ul type="square"> 表 示 实心 方 


3 种 符号 进 
竹 指定 其 他 
块 列表 ， 相 
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<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>5.11</title> 
</head> 
<body> 
<h2> 实 心 圆 列表 </h2> 
<ul type="disc"> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
</ul> 
<h2> 空 心 圆 列 表 </h2> 
<ul type="circle"> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
</ul> 
<h2> 实 心 方块 列表 </h2> 
<ul type="square"> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
</ul> 
</body> 
</html> 


运行 这 段 代 码 后 的 效果 如 图 5.22 所 示 。 











图 5.22 











5.4.3 定义 列表 


在 HTML 页 面 中 ， 还 有 一 种 列表 称 之 为 定义 列表 ， 它 的 列表 项 是 由 项 目 及 其 注释 组 成 
的 。 定 义 列表 用 <dl> 标 签 表 示 ， 其 中 又 包含 <d 忆 标签 和 <dd> 标 签 ，<d 己 标签 用 于 定义 列表 项 
， 而 <dd> 标 签 用 于 对 项 目 进行 注释 。 一 个 <dl> 标 签 中 可 以 包含 多 组 项 目标 签 和 注释 。 例 如 
下 面 这 段 代码 : 




















团 
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<!doctype html> 


<html> 
<head> 


<meta charset="utf=8"> 
<title>5.12</title> 


</head> 


<body> 
<dl> 


<dt> 标 题 </dt> 


<dd> 内 容 </dd> 
<dd> 内 容 </dd> 


<qdt> 智 能 手机 </dt> 
<dd> 苹 果 手 机 </dd> 


</d1> 
</body> 
</html> 


<qdd> 三 星 手 机 </dd> 
<dd> 华 为 手机 </dd> 





运行 这 段 代码 后 的 效果 如 图 5.23 所 示 。 
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€ C 
让 让 用 


dreamweaver cc 2 


标题 
蜂 


内 容 
智能 手机 
苹果 手机 


三 星 手机 
华为 手机 














file:///C:/test/xampp/htdocs/5/5.12.html 
HTML 


5.23 





5.5 制作 横向 导航 








列表 除了 














组 织 




















介绍 如 何 使 








加 新 建 一 个 HTML 页面， 在 代码 视图 


织 HTML 内 容 以 外 ， 还 经 常 与 CSS 一 起 


























无 序列 表 和 CSS 制 作 横向 导航 条 。 





<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 


中 编写 如 下 代码 : 


制作 各 种 导航 效果 。 本 节 将 
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容 





<title>5.13</title> 
</head> 
<body> 
<div id="nav"> 
<ul> 
<1i><a href="#"> 首 页 snbsp; | &nbsp; </a></1i> 
<1i><a href="#"> 集 团 概况 snbsp; | &nbsp; </a></1i> 
<1i><a href="#"> 品 牌 中 心 &nbsp; | &nbsp;</a></1i> 
<1i><a href="#"> 产 品 中 心 &nbsp; | &nbsp;</a></1i> 
<1i><a href="#"> 项 目 优 势 snbsp; | &nbsp;</a></1i> 
<1i><a href="#"> 加 盟 我 们 snbsp; | &nbsp;</a></1i> 
<1i><a href="#"> 新 闻 中 心 &nbsp; | &nbsp;</a></1i> 
<1i><a href="#"> 联 系 我 们 </a></1i> 
</ul> 
</div></body> 
</html> 


这 段 代码 在 浏览 器 中 的 显示 效果 如 图 5.24 所 示 。 








© [file///C/xampp/htdocs/5/5.13.html 
济 应 肌 [] dreamweaver cc2.。 HTML 








图 5.24 











贺 设置 无 序列 表 的 CSS 样 式 ， 去 掉 列 表 前 的 小 圆 点 ， 相 关 代码 如 下 所 示 : 


<style> 

#nav ulf{ 
list-style:none; 
3 

</style> 


刷新 浏览 器 后 的 效果 如 图 5.25 所 示 。 














EE 
€ 3 © |B file///C/xampp/htdocs/5/513.html 
于 应 下 [dreamweaver cc 2 加 HTML 

看 页 | 

集 可 概况 | 


品牌 中 心 | 
产品 中 心 | 


| 
加 弱 我 们 | 
新 闻 中 心 | 
联系 我 们 








图 5.25 
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辆 设置 列表 项 横向 浮动 ， 并 设置 字体 颜色 ， 
<style> 
af 


text-decoration:none; 
font-size:20px; 
color:white; 
padding:10px; 

} 

#nav ulf{ 

list-style:none; 

} 

#nav 1if{ 

float:left; 
line-height:50px; 
background-color:#1El1El1E; 
font-family:' 微 软 雅 黑 ' 7 

} 
</style> 


刷新 浏览 器 后 的 效果 如 图 5.26 所 示 。 














相关 代码 如 下 所 示 : 








图 5.26 
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HTML 标签 和 CSS 样 式 是 组 成 网 页 的 两 个 最 重要 的 元 素 ， 如 果 说 HIML 标 签 是 组 成 网 页 的 
框架 ， 那 么 CSS 样 式 就 是 网 页 框架 外 华丽 的 外 衣 。 本 章 我 们 就 来 详细 介绍 CSS 的 基础 知识 ， 
掌握 如 何 让 网 页 以 最 漂亮 的 形式 展现 给 大 家 。 



































6:1 认识 CSS 样 式 表 


es 



































早期 的 HTML 页 面 为 了 做 出 漂亮 的 界面 ， 就 为 HTML 增 加 了 很 多 属性 ， 这 样 做 的 结果 就 
是 页 面 代码 变 得 十 分 腔 肿 ， 而 且 不 利于 维护 。CSS 在 解读 这 一 问题 中 承担 了 重要 的 角色 。 
























































6.1.1 CSS 是 什么 























CSS 是 Cascading Style Sheets 的 简称 ， 也 叫做 层 替 样式 表 ， 是 一 种 用 来 表现 HTML、XML 
等 文件 样式 的 计算 机 语言 。 








6.1.2 CSS 能 做 什么 




















我 们 形象 地 将 CSS 比 喻 为 HTML 页 面 华丽 的 外 衣 ， 如 果 一 个 HTML 页 面 使 用 两 套 不 同 的 
CSS 样 式 ， 就 能 呈现 出 两 种 截然 不 同 的 风格 。 例 如 下 面 这 段 HTML 代 码 ， 页 面 的 主要 内 容 是 3 
个 div 元 素 ， 没 有 使 用 任何 CSS 样 式 的 时 候 ， 运 行 这 段 代 码 后 ， 我 们 可 以 看 到 如 图 6.1 所 示 页 
效果 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>6.1</title> 
</head> 

<body> 

<div id="boxl"> 内 容 1</div> 
<div id="box2"> 内 容 2</div> 
<div id="box3"> 内 容 3</div> 
</body> 

</html> 
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D dreamweaver cc 2.. DHTML 

















图 6.1 























如 果 使 用 了 以 下 CSS 样 式 ， 运 行 后 的 效果 如 图 6.2 所 示 。 








<style> 

divt{ 

width:80px; 

height:60px; 
font-size:20px; 
font-weight:bold; 
margin-top: 5px; 
border:solid lpx red; 
#boxl{ 
background-color:#DFCDA2; 
color:#C85E72; 

3 

#box21{ 
background-color:#Al1E7CE; 
color:#3D6212; 

#box31{ 
background-color:#FOABEB; 
color:#06606F; 

. 

</style> 











© filey///C/xampp/htdocs/6/6.1 html 
洲 应 号 站 dreamweaver ce 2 器 HTML 























图 6.2 
































如 果 使 用 了 以 下 CSS 样 式 ， 运 行 后 的 效果 如 图 6.3 所 示 。 





<style> 
divt{ 
width:80px; 
height:60px; 
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font-size:20px; 
font-weight:bold; 
text-align:center; 
border:solid lpx red; 
float:left; 
margin-left:5px; 
line-height:60px; 

站 

#boxl{ 
background-color:#84E5C8; 
color:#E80F0F; 

下 

#box21{ 
background-color:#D49293; 
color:#009E12; 

下 

#box31{ 
background-color:#E8D37B; 
color:#1729EC; 

} 

</style> 


四 x 
€ 3 @ filey///C/xampp/htdocs/6/6.1.html 
江 deamweaer ce 2 HTML 





图 6.3 
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从 以 上 案例 中 我 们 可 以 看 出 ，CSS 可 以 控制 网 页 中 元 素 的 布 



































6.1.3 CSS 与 HTML 的 区 别 


仅仅 使 用 HTML 标 签 堆 县 出 一 个 网 页 ， 那 么 这 个 网 页 将 会 极其 
建设 中 的 摩天 大 楼 ， 徒 有 答 入 云霄 的 框架 ， 却 处 处 堆 满 建筑 材料 ， 狼 藉 不 堪 ， 相 
多 套 设 计 精 美的 CSS 样 式 ， 网 











面 的 宽度 、 各 个 元 素 的 排列 方式 、 背 景 等 各 种 样式 ，CSS 主 要 的 作用 就 是 美化 网 页 。 











局 、 字 体 的 大 小 和 粗细 、 页 


CSS 与 HIML 都 是 组 成 网 页 的 重要 元 素 ， 它 们 各 有 各 的 功能 ， 谁 也 不 能 替代 对 方 。 如 果 






































口 


6.1.4 CSS 有 哪些 优势 


CSS 是 网 页 风格 的 决定 性 因素 ， 它 的 主要 作用 就 是 美化 网 页 。 相 比 只 使 用 HTML 








能 以 最 美的 方式 展示 出 来 。 
































没有 一 个 合适 的 HTML 页 





面 来 承载 它们 ， 忆 


陋 ， 毫 无 美感 可 言 ， 就 好 比 
反 ， 如 果 有 





b 么 这 些 CSS 样 式 


也 不 

















作为 超 文本 标记 语言 的 HTML 用 于 组 织 网 页 的 内 容 ， 而 作为 层 亚 
控制 HTML 如 何 显示 。HTML 由 众多 的 HTML 标 签 组 成 ， 而 CSS 则 通过 
HTML 标 签 以 什么 样 的 样式 进行 展示 。 





















































样式 表 的 CSS 则 











层 双 样式 表 控 制 这 些 









































带 的 
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样式 ，CSS 可 以 实现 更 多 的 功能 和 样式 ， 它 的 优势 主要 体现 在 以 下 几 个 方面 : 


























(1) 文档 的 结构 和 表现 相 分 离 ， 便 于 设计 人 员 独 立 编写 CSS 样 式 。 也 便于 后 期 维护 。 





(2) 样式 定义 精确 到 像素 的 级 别 。 
(3) 浏览 器 支持 多 重 样式 ， 使 网 站 同时 支持 多 种 表现 形式 。 

















(4) 使 用 CSS 的 网 页 占用 宽度 比较 少 ， 浏 览 器 支持 CSS 样 式 缓存 ， 从 而 增强 了 网 站 的 性 能 。 



































(5) 使 用 样式 表 可 以 针对 不 同 的 设备 类 型 对 网 站 的 内 容 进 行 优化 。 


6:2 CSS 的 工作 原理 





CSS 通 过 设置 属性 来 控制 HTML 的 样式 ， 许 多 CSS 属 性 都 与 HTML 属 性 相似 ， 下 面 我 们 就 
来 详细 介绍 CSS 的 基本 语法 以 及 CSS 的 类 型 。 














6.2.1 CSS 基 本 语法 
CSS 语 法 规则 主要 由 两 部 分 构成 ， 一 个 是 选择 器 ， 另 一 个 是 一 条 或 多 条 声明 。 选 择 器 通 


常 是 需要 改变 样式 的 HTML 元 素 。 每 条 声明 则 是 由 一 个 属性 和 一 个 值 组 成 ， 










































































属性 与 值 之 间 






































冒号 分 开 ， 多 个 声明 之 间 用 分 号 隔 开 ， 声 明 必须 用 花 括 号 围 起 来 。 例 如 下 



































的 代码 : 








hl {color:red;font-size:14px;} 


其 中 选择 器 为 “hl”，“color” 和 “font-size” 都 是 属性 ，“red” 和 














“14px” 都 是 值 。 














在 设置 颜色 的 值 时 ， 可 以 使 用 CSS 允 许 的 引文 单词 ， 如 red、green、blue 等 ， 














进 制 颜色 值 ， 如 下 所 示 : 


hl {color:#ff£0000} 
或 者 使 用 CSS 的 缩写 形式 ， 如 下 所 示 : 
hl {color:#f00} 

或 者 使 用 RGB 颜色 值 ， 如 下 所 示 : 


hl {color:rgb(255,0,0)} 
hl {color:rgb(100%,0%,0%)} 


另外 ， 如 果 值 为 若干 单词 时 ， 则 需要 给 值 加 引号 ， 如 下 所 示 : 


p {font-family: "sans serif";} 





















































6.2.2 CSS 类 型 


























还 可 以 使 用 十 六 








根据 CSS 使 用 位 置 的 不 同 ， 可 以 将 CSS 的 类 型 分 为 3 类 ， 分 别 是 外 部 样式 表 、 内 部 样式 表 
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和 行 间 样式 表 。 外 部 样式 表 是 指 将 CSS 样 式 单独 作为 一 个 样式 文件 ， 在 HTMIL 文 档 中 引入 ; 


内 前 


是 指 


已 











样式 表 是 指 将 CSS 样 式 作 为 HTML 页 面 中 的 一 部 分 ， 写 在 <style> 标 签 中 ， 而 行 间 样 式 表 





























将 CSS 样 式 与 HTML 属性 写 在 一 起 的 一 种 方式 ， 这 种 方式 可 在 测试 时 使 用 ， 通 常情 况 下 








不 建议 使 





中 ， 然 后 就 可 以 在 HTML 页 面 中 使 用 <link> 标 签 将 外 部 样式 表 引 入 到 文件 中 。 例 如 ， 我 们 在 
名 为 CSS 的 文件 夹 中 新 创建 一 个 名 为 Index.css 的 CSS 文 件 ， 而 index.html 文 件 与 CSS 文 件 夹 在 同 














6.3 CSS 样 式 的 引用 方法 


1. 外 部 样式 表 
要 使 用 外 部 样式 表 ， 首 先 需 要 创建 一 个 CSS 样 式 表 文 件 ， 将 CSS 样 式 都 写 在 这 个 文件 



















































































个 目 


录 下 ， 这 样 我 们 就 可 以 在 index-html 文 件 中 使 用 <link> 标 签 引 入 外 部 样式 表 ， 详 细 代码 





























0 下 : 


<!dqoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.2</title> 

<link type="text/css" rel="stylesheet" href="CSS/index.css"> 

</head> 

<body> 

<h2> 外 部 样式 表 </h2> 

<ul> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 

</ul> 

</body> 

</html> 


外 部 样式 表 通 常会 被 多 个 文件 使 用 。 例 如 ， 网 站 上 所 有 网 页 都 有 一 个 相同 的 区 域 ， 现 在 
































需要 修改 网 页 中 这 个 区 域 的 背景 颜色 ， 如 果 逐 个 修改 网 页 背景 色 的 CSS 代 码 ， 那 将 是 一 件 非 
常 痛苦 的 事情 。 使 用 外 部 样式 表 后 ， 因 为 所 有 网 页 都 引入 了 这 个 样式 ， 所 以 只 需要 修改 外 部 
样式 表 中 对 应 区 域 的 背景 色 ， 就 可 以 修改 所 有 页 面 的 颜色 。 这 里 需要 注意 的 是 ，<link> 标 签 
必须 作为 <head> 标 签 的 内 容 出 现 。 


HTML 页面 中 的 <head> 标 签 中 使 用 <style> 标 签 设置 样式 。 例 如 下 面 













































































2. 内 部 样式 表 


在 使 用 内 部 样式 表 时 ， 我 们 不 需要 为 CSS 样 式 单独 创建 一 个 样式 文件 ， 可 以 直接 在 
的 代码 : 






























































回 























<!doctype html> 
<html> 
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<head> 


<meta charset="utf-8"> 
<title>6.2</title> 


<style 
i 


type="text/css"> 


Color:#7E2729; 


有 
ul{ 


list-style:none; 
width:60px; 
text-align:center; 


3 
了 


border:solid lpx #C0D3D4; 
margin-top:2px; 
background-color:#1B5164; 
color:white; 


3 


</style> 
</head> 


<body> 


<h2> 外 部 样式 表 </h2> 


<ul> 


<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 
<1i> 项 目 </1i> 


</ul> 


</body> 
</html> 








<style> 标 签 


在 这 段 代 码 中 ， 我 们 为 HIML 页面 中 的 元 素 设置 了 3 个 CSS 样 式 ， 这 3 个 CSS 样 式 位 了 
中 的 一 部 分 出 现 ， 其 中 type 属 性 是 指 style 元 
素 以 CSS 的 语法 定义 。 需 要 注意 的 是 ， 内 部 样式 表 只 作用 于 当前 


3. 行 间 样 式 表 























ph， 与 <style> 标 签 一 起 作为 HTML 页 



























































的 HTML 页 面 。 

















可 以 直接 在 HIML 标 签 内 通过 设置 style 属 性 的 值 ， 设 置 各 个 HTML 元 素 的 样式 。 通 过 这 














种 方法 设置 的 样式 表 ， 只 能 作 





| 














当前 的 HIML 元素 ， 例 如 下 


回 














<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title>6.3</title> 
</head> 


<body> 


<h2 style="color:#7E2729"> 外 部 样式 表 </h2> 
<ul style="list-style:none; width:60px; text-align:center;"> 

1i style="border:solid lpx #C0D3D4; margin-top:2px; background- 
color:#1B5164; color:white;"> 项 目 </1i> 
1i style="border:solid lpx #C0D3D4; margin-top:2px; background- 
color:#1B5164; color:white;"> 项 目 </1i> 
li style="border:solid lpx #C0D3D4; margin-top:2px; background-— 
color:#1B5164; color:white;"> 项 目 </1i> 


J 


5 


这 段 代码 : 
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</ul> 
</body> 
</html> 


这 段 代码 的 效果 与 内 部 样式 表 中 代码 的 效果 完全 相同 ， 








式 都 是 重复 的 ， 而 有 全 HIML 代 码 与 CSS 代 码 混杂 在 一 起 ， 有 
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但 是 这 段 代 码 中 有 很 多 的 CSS 样 
民 大 程度 上 降低 了 代码 的 可 读 性 。 





























如 果 现 在 要 蔡 换 项 目 列表 的 背景 色 ， 我 们 需要 逐个 修改 项 


















































的 事情 ， 所 以 不 建议 在 项 目 中 使 用 这 种 样式 。 

















选择 器 是 CSS 的 核心 ， 从 最 初 的 标签 选择 器 、 类 选择 器 、id 选 择 器 到 CSS3 中 提供 的 








富 的 选择 器 ， 定 位 页 面 上 的 任意 元 素 天 











始 变 得 越发 简单 














6.4.1 标签 选择 器 





列表 的 样式 ， 这 将 是 一 件 很 麻烦 























标签 选择 器 是 最 基本 的 CSS 选 择 器 ，HTML 文 档 中 的 元 素 本 身 就 是 一 个 选择 器 ， 例 如 要 
设置 hl 元 素 的 字体 颜色 为 红色 ， 可 以 通过 以 下 代码 声明 标签 选择 器 : 








<style> 
+ | 
color: 
: 
</style> 


red; 











如 果 要 为 hl 设置 





<style> 

+ | 

color: red; 
font-size:24px; 
! 

</style> 


6.4.2 class 选 择 器 


多 的 样式 ， 可 以 继续 在 花 括 号 中 添加 其 他 属性 和 值 ， 例 如 下 





这 段 代码 : 

















可 以 在 HTML 标 签 中 指定 class 属 性 ， 将 class 属 性 的 值 作为 class (类 ) 选择 器 。 一 个 








HTML 页 面 中 ， 不 同 的 HTML 标 签 可 以 有 相同 的 class 属 性 值 
签 具有 相同 的 样式 。 例 如 下 面 这 段 代码 : 
<!doctype html> 


<html> 
<head> 




















上 甸 


























相同 class 选 择 器 的 HTML 标 
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<meta charset="utf=8"> 
<title>6.4</title> 

<style type="text/css"> 
.redText{ 

color:red; 

. 

</style> 

</head> 

<body> 

<h2 class="redText"> 标 题 </h2> 
<p class="redText"> 段 落 中 的 文字 </p> 
</body> 

</html> 


在 这 段 代码 中 ，HTML 页 面 中 主要 有 两 个 元 素 ， 一 个 是 2 标签 ， 一 个 是 p 标 签 。 这 两 个 元 
素 有 一 个 共同 的 class 属 性 值 redText。 在 内 部 样式 表 中 ， 定 义 了 一 个 名 为 redText 的 样式 ， 该 样 
式 中 设置 字体 为 红色 。 因 为 这 两 个 元 素 使 用 了 相同 的 类 选择 器 ， 所 以 它们 的 字体 颜色 都 是 红 
色 ， 运 行 这 段 代 码 后 的 效果 如 图 6.4 所 示 。 
















































































¢ 3 G D filey//C:/xampp/htdocs/6/5.4.html 
江 应 同 [dreamwemver ee 2.， 中 MTML 


标题 




















6.4.3 id 选 择 器 


在 HTML 页 面 中 ，id 属 性 确定 了 HTML 元 素 的 唯一 性 。 通 过 id 属 性 设置 的 样式 称 为 1d 选 择 
器 ， 所 以 id 选 择 器 只 能 应 用 于 页 面 中 唯一 确定 的 元 素 。 例 如 下 面 这 段 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>6.5</title> 

<style type="text/css"> 
#redText{ 

color:red; 

和 

#blueText{ 

color:blue; 
font-weight:bold; 

站 

</style> 

</head> 

<body> 

<h2 id="redText"> 标 题 </h2> 
<p id="blueText"> 段 落 中 的 文字 </p> 
</body> 
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</html> 

在 这 段 代 码 中 ，h2 元 素 的 id 属性 值 为 “redText”，p 元 素 的 id 属性 值 为 “blueText”， 分 
I 为 这 两 个 元 素 设置 id 选择 器 ， 并 设置 它们 的 颜色 为 红色 和 蓝 色 ， 运 行 这 段 代 码 后 的 效果 如 
图 6.5 所 示 。 











Ho 

















GE (filey//c:/xampp/htdocs/6/65.5.html 


四 应 月 [0D dreamweaver cc 2… HTML 
标题 
自 革 中 的 文字 




















6.4.4 通配符 选择 


通配符 用 星 号 〈* ) 表示 ， 通 配 符 选择 器 可 以 用 来 设置 所 有 元 素 的 样式 ， 或 者 设置 某 个 
元 素 下 所 有 元 素 的 样式 。 通 常情 况 下 ， 通 配 符 选择 器 会 被 用 在 CSS 样 式 文件 的 开头 ， 去 
除 浏览 器 默认 的 边框 设计 ， 例 如 下 面 的 代码 : 

*{ 、 

margin:0; 

padding:0; 

这 段 代 码 的 意思 是 所 有 元 素 的 内 边 距 设置 为 0 个 像素 ， 所 有 元 素 的 外 边 距 设置 为 0 个 像 
素 。 前 可 供 大 家 选择 的 浏览 器 种 类 很 多 ， 不 同 的 浏览 器 对 于 默认 边框 的 距离 设置 是 有 

别 的 ， 为 了 能 够 更 好 的 控制 页 面 的 布局 效果 ， 设 计 者 往往 需要 清除 浏览 器 默认 的 边 距 设 
计 ， 这 就 是 CSS 样 式 文件 的 开头 往往 都 要 加 上 这 段 代 码 的 原因 。 
通配符 选择 器 还 有 一 种 用 法 ， 表示 某 个 元 素 下 所 有 元 素 的 样式 。 我 们 都 知道 ， 
HTML 页 面 中 的 标签 可 以 嵌 套 使 用 ， 如 果 想 让 被 嵌 套 的 元 素 具有 相同 的 样式 ， 就 可 以 使 用 通 
配 符 选 择 器 。 例 如 下 面 这 段 代码 : 
.demo *{ 
color:red; 


font-size:24px; 
3 


所 有 被 通配符 选择 嚣 demo 嵌 套 的 元 素 ， 都 具有 相同 的 颜色 和 字体 大 小 。 































































































































































































































































































6.4.5 属性 选择 器 
属性 选择 器 可 以 根据 元 素 的 属性 及 属性 值 来 选择 元 素 。 属 性 选择 器 的 应 用 非常 灵活 ， 我 
们 可 以 将 属性 选择 器 分 为 以 下 几 种 类 型 。 
1. 简单 属性 选择 器 
这 类 属性 选择 器 仅仅 关注 HTML 标 签 中 是 否 包含 匹配 的 属性 ， 而 不 关注 其 属性 值 是 否 相 
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同 。 














例如 下 面 这 段 代码 : 


*[title]t{ 
color:blue; 
. 


使 用 通配符 选择 器 和 属性 选择 器 ， 设 置 所 有 具有 title 属 性 的 元 素 的 颜色 为 蓝 色 。 注 意 属 


















































性 选择 器 应 该 书写 在 方 括号 内 。 这 里 的 通配符 也 可 以 换 成 特定 的 HIML 元 素 ， 例 如 下 面 这 段 
代码 : 





altitle]{ 
color:blue; 
. 


另外 ， 如 果 需 要 对 多 个 属性 设置 相同 的 样式 ， 还 可 以 将 多 个 属性 选择 器 连接 在 一 起 使 





























， 例 如 下 面 这 段 代码 : 














a[href] [title]f{ 
color:blue; 
} 


2. 根据 具体 属性 值 选择 
根据 属性 值 可 以 更 准确 地 匹配 到 HTML 元 素 ， 这 样 就 可 以 在 具有 相同 属性 的 多 个 元 素 中 























缩小 选择 范围 。 例 如 下 面 这 段 代码 : 























a[lhref="http://www.baidu.com"] { 
color:red; 
} 


这 段 代 码 中 仅 指 定 了 链接 地 址 为 “http:Wwww.baidu.com” 的 超 链接 显示 为 红色 ， 如 果 











HTML 页 面 中 还 有 其 他 超 链接 ， 但 是 它们 的 href 值 不 是 这 个 链接 地 址 ， 那 么 就 不 会 显示 为 红 


色 。 














与 简单 的 属性 选择 器 类 似 ， 根 据 具体 属性 值 选择 的 属性 选择 器 也 可 以 将 具有 多 个 属性 的 


























选择 器 连接 在 一 起 使 用 。 例 如 下 面 这 段 代码 : 




















a[href="http://www.baidu.com"] [title=" 百 度 "] { 
color:red; 
上 


这 段 代 码 中 不 仅 确切 地 指定 了 属性 href 的 值 ， 而 且 还 指定 了 属性 title 的 值 ， 只 有 满足 这 两 





个 条 件 的 超 链接 元 素 才 可 以 显示 为 红色 。 


3. 根据 部 分 属性 值 选 择 
在 HIML 页面 中 ， 很 多 个 相同 的 HTML 元 素 都 设置 了 同样 的 属性 ， 它 们 的 属性 值 相互 关 


























联 却 不 完全 相同 ， 如 果 要 设置 这 些 元 素 的 属性 ， 就 可 以 使 用 部 分 属性 值 匹配 选择 的 方式 。 如 
果 需 要 根据 属性 值 中 的 某 一 部 分 进行 选择 ， 则 需要 使 用 波浪 号 (~) 。 例 如 下 面 这 段 代 码 ; 









































<!doctype html> 
<html> 
<head> 
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<meta charset="utf-8"> 
<title>6.6</title> 

<style type="text/css"> 
plclass~="sec"]{ 

color:blue; 

. 

</style> 

</head> 

<body> 

<p class="sec One"> 这 是 第 一 段 内 容 </p> 
<p class="sec Two"> 这 是 第 二 段 内 容 </p> 
<p class="sec Three"> 这 是 第 三 段 内 容 </p> 
</body> 

</html> 


运行 这 段 代 码 后 ， 效 果 如 图 6.6 所 示 。 














655 x 
© [filey//C:/xampp/htdocs/6/6.6.html 
洲 下 且 门 dreamweaver cc 2.， HTML 


这 是 第 一 段 内 容 


这 是 第 二 段 内 容 
这 是 第 三 段 内 容 








图 6.6 




















可 以 看 到 ， 第 一 段 内 容 和 第 二 段 内 容 都 按照 我 们 的 设计 应 用 了 样式 ， 但 是 第 三 段 内 容 

































































没有 应 用 样式 。 这 是 因为 第 三 段 的 class 属 性 值 中 并 没有 空格 ， 因 此 并 不 能 被 这 种 部 分 属性 值 
选择 的 方式 正确 匹配 。 要 使 用 部 分 属性 值 选择 的 属性 选择 器 ， 必 须 将 HIML 元 素 的 属性 值 设 


置 成 具有 空格 的 类 型 。 
































4. 子 串 匹 配属 性 选择 器 
子 串 匹配 属性 选择 器 是 对 部 分 属性 值 选择 器 的 一 个 扩充 ， 因 为 它 适 用 于 多 种 情况 下 的 属 



























































性 选择 器 。 例 如 ， 对 以 某 字符 串 开 头 或 结束 的 属性 值 或 者 属性 值 中 包含 某 字符 串 的 属性 值 进 
行 选择 。 简 单 概括 如 下 表 所 示 : 

















表 6.1 





[abc^="def"] 
[abc$="def'] 
[abc*="def"] 









选择 abc 属 性 值 以 “def” 开 头 的 所 有 元 系 
选择 abc 属 性 值 以 “def” 结 束 的 所 有 元 票 
选择 abc 属 性 值 中 包含 子囊 “def” 的 所 有 元 系 




















例如 下 面 这 段 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>6.7</title> 
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<style type="text/css"> 


plclass^="sec"]{ 


font-size:24px; 
bl 


plclass$="Red"] { 


color:red; 


¥ 


plclass*="Blue"]{ 


color:blue; 
</style> 
</head> 
<body> 


<p class="secRed"> 这 是 第 一 段 内 容 </p> 
<p class="secBlue"> 这 是 第 二 段 内 容 </p> 
<p class="secYellow"> 这 是 第 三 段 内 容 </p> 


</body> 
</html> 


第 1 个 样式 匹配 以 “sec” 开 头 的 class 属 性 值 ， 并 设置 字号 为 24 像 素 ; 第 2 个 样式 匹配 以 
“Red” 结 束 的 class 属 性 值 ， 并 设置 颜色 为 红色 ; 第 3 个 样式 匹配 包含 “Blue” 字 符 串 的 class 


























属性 值 ， 并 设置 样式 为 蓝 色 。 这 里 需要 注意 的 是 ， 在 匹配 字符 串 与 属性 值 时 ， 应 该 区 分 大 小 



























































写 英文 字母 ， 否 则 将 无 法 正确 显示 样式 。 运 行 这 段 代 码 后 的 效果 如 图 6.7 所 示 。 


6.4.6 庶 套 选择 器 


€ 3 © 3 fle///C/xampp/htdocs/6/6.7.html 
demeever ce2., DS HT 


这 是 第 一 段 内 容 




















HTML 元 素 可 以 嵌 套 使 用 ，CSS 样 式 也 可 以 通过 榜 套 来 定义 选择 器 。 通 过 嵌 套 定义 的 选 























择 器 名 称 多 个 标记 之 间 


<!ldoctype html> 
<html> 
<head> 











空格 分 开 ， 例 如 下 面 这 段 代码 : 














<meta charset="utf-8"> 
<title>6.8</title> 
<style type="text/css"> 


af 


text-decoration:none; 


font-size:24px; 
color:red; 
. 
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</style> 

</head> 

<body> 

<ul> 
<1i><a href="http://www.baiqdu.com"> 百 度 </a></1i> 
<1i><b>Bing</b></1i> 

</ul> 

<a href="http://www.qq.com"> 腾 讯 网 </a> 

</body> 

</html> 


在 这 段 代 码 中 有 两 个 超 链接 ， 第 1 个 超 链接 榜 套 在 列表 的 <li> 元 素 中 ， 第 2 个 超 链接 与 列 








表 同 级 。 通 过 设置 超 链接 的 样式 ， 我 们 去 掉 了 超 链接 的 下 划 线 ， 设 置 字 号 为 24 个 像素 ， 寺 


F 设 








置 颜色 为 红色 。 运 行 这 段 代码 后 ， 效 果 如 图 6.8 所 示 。 


oa > 
© 言 GDfleW/C/xampp/htdocV&68html 


讲  【) dnwamwsanrccz， 口 ML 








图 6.8 




















我 们 设置 的 样式 不 仅 应 用 到 第 1 个 超 链 接 ， 还 应 用 到 第 2 个 超 链接 。 如 果 希 望 第 1 个 超 链 





























嵌 套 选择 器 可 以 省 略 设 置 id 或 class 属 性 ，CSS 样 式 的 代码 如 下 所 示 : 


<style type="text/css"> 
af 
text-decoration:none; 
font-size:24px; 
color:red; 

1 

ul 1i al 
font-size:16px; 
color:green; 

3 

</style> 


次 刷新 页 面 后 ， 效 果 如 图 6.9 所 示 。 















































3 
€ 3 © 了 He/CHampp/htdocy6/58html 
HD dreamneaverce2.. HTM 


。 百 度 
» Bing 


腾讯 网 




















接 的 颜色 显示 为 绿色 ， 而 且 字 号 更 小 一 些 ， 同 时 又 不 影响 第 2 个 超 链 接 的 样式 ， 那 么 就 需要 
为 这 两 个 超 链接 分 别 设置 id 或 class 属 性 ， 并 使 用 id 选择 器 或 者 class 选 择 器 分 别 设置 样式 。 而 使 
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6.4.7 链接 选择 器 


链接 选择 器 针对 超 链接 的 各 种 状态 设置 样式 。 超 链接 的 状态 分 为 未 访问 、 已 访问 、 鼠 标 
悬浮 和 点 击 4 种 ， 对 应 的 4 种 链接 选择 器 如 下 所 示 。 


(1) link: 用 于 选取 未 被 访问 的 链接 。 
(2) visited; 用 于 选取 已 经 访问 的 链接 。 
(3) hover: 用 于 选取 鼠标 悬浮 时 的 链接 。 
(4) active: 用 于 选取 点 击 时 的 链接 。 


例如 下 面 这 段 代 码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>6.9</title> 
<style type="text/css"> 
a:linkt{ 

color:blue; 

a:visited{ 
color:#A7522B; 

b 

a:hovert{ 

color:red; 

', 

a:active{ 

Color: green; 

1: 

</style> 

</head> 

<body> 
<h3> 链 接 选 择 器 </h3> 

<a href="http://www.baidu.com" target=" blank"> 百 度 </a> 
</body> 

</html> 


在 这 段 代码 中 ，a:link 选 择 器 设置 了 超 链接 没有 访问 时 显示 为 蓝 色 ，a:visited 选 择 器 设置 
超 链接 访问 后 显示 为 棕色 ，a:hover 选 择 器 设置 当 鼠 标 悬 浮 在 超 链接 上 时 ， 超 链接 显示 为 红 
色 ，a:active 选 择 器 设置 当 点 击 超 链 接 时 显示 为 黄色 。 

















































































































6.5 CSS 内 容 排版 








HIML 页面 咎 





局 和 排版 是 CSS 的 主要 功能 。 虽 然 HIML 标签 都 有 默认 的 样式 ， 但 是 为 了 丰 
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6.5.1 设置 字体 


门 仍 需 要 使 
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CSS 重 新 设置 页 面 


























CSS 字 体 属 性 
类 型 的 字体 系列 名 称 ， 
种 ， 包 括 Serif 字 体 、 
具体 的 字体 系列 ， 
在 CSS 中 使 


hif{ 
































定义 文本 的 字体 系列 、 
一 种 是 拥有 相似 外 观 的 字体 系列 组 合 ， 
Sans-serif 字 体 、Monospace 字 体 、Cursive 字 体 和 Fantasy 字 体 ， 另 一 种 是 
称 为 特定 字体 系列 ， 如 Times 或 Courier。 


SS 


大 小 、 


加 粗 、 风 格 和 变形 。 


CSS 中 设置 了 两 种 
字体 系列 ， 总 共有 5 





























font-family 属 性 设置 字体 ， 例 如 下 面 


font-family:Cambria 


} 


在 这 段 代 码 中 ， 
但 是 如 果 用 户 的 




















的 ， 














我 们 为 标题 hl 设置 字体 为 Cambria。 通 常情 况 下 ， 
电脑 上 没有 安装 Cambria 字 体 ， 系 统 可 能 会 


这 段 代码 : 














这 样 设置 是 没有 问题 
体 中 比较 接近 的 一 











通 
































种 字体 替代 Cambria 字 体 。 为 了 避免 出 现 这 种 不 确定 的 情况 ， 我 们 在 设置 字体 的 时 候 可 以 指定 


一 系列 类 似 的 字体 ， 例 如 下 面 


hl{ 


font-family:Cambria, 


Roman", serif 
; 















































这 段 代码 : 






































"Hoefler Text", 


"Liberation Serif", Times, "Times New 












































当 系 统 找 不 到 Cambria 字 体 时 ， 就 会 继续 匹配 后 面 一 种 字体 ， 以 此 类 推 。 这 里 还 需要 说 明 
的 一 点 是 ， 有 些 字体 的 名 称 可 能 由 多 个 单词 组 成 ， 例 如 Hoefler Text， 在 设置 这 种 字体 时 需要 
使 用 引号 ， 因 为 这 类 字体 名 称 中 间 有 一 个 空格 。 某 些 字 体 名 称 可 能 包含 # 或 者 5 之 类 的 字符 ， 
也 需要 使 用 引号 。 











6.5.2 文字 排版 




















































































































文本 是 HTML 页 面 中 的 主要 内 容 ，CSS 中 使 用 font 属 性 设置 文本 的 样式 。font 是 一 系列 关 

于 语法 和 如 何 使 用 CSS 调 整 文字 的 概述 。 下 面 我 们 详细 地 进行 介绍 
(1) font-size: 设置 文字 的 大 小 。 

不 同 大 小 的 文字 可 以 让 网 页 看 起 来 更 有 层次 感 。HIML 标 签 也 有 默认 的 文字 大 小 ， 例 如 
HTML 标 题 标签 ， 从 <h1> 到 <h6> 文 本 的 大 小 逐渐 减 小 ， 而 <p> 标 签 表示 的 段落 也 有 默认 的 大 
小 。 这 些 标签 都 不 用 特别 设置 文字 的 大 小 ， 除 非 有 特殊 的 需要 

例如 下 面 这 段 代码 : 

<!ldoctype html> 

<html> 

<head> 


<meta charset= 


UL 二 一 有 了 人 > 


<title>6.10</title> 
<style type="text/css"> 
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#defaultTitle{ 
color:red; 

} 

#updateTitle{ 
color:blue; 
font-size:20px; 
} 

</style> 
</head> 

<body> 


<hl id="defaultTitle"> 默 认 标题 </h1> 
<hl id="updateTitlen> 修 改 后 的 标题 </h1> 


</body> 
</html> 








在 这 段 代 码 中 有 两 个 <h1> 标 签 ， 它 们 本 来 应 该 有 相同 的 文字 大 小 ， 但 是 通过 CSS 样 式 将 





第 2 个 <h1> 标 题 文 字 大 小 设置 为 20px， 所 以 运行 这 段 代 码 后 ， 效 果 如 





修改 后 的 标题 


(2) font-weight: 设置 文本 的 粗细 。 
在 HTML 标 签 中 ，<b> 标 签 和 <strong> 标 签 
通过 设置 font-weight 属 性 控制 文本 的 粗细 。 在 CSS 中 ， 从 100~900 指 定 了 9 个 级 别 的 文本 粗 引 
































100 表 示 最 细 的 文本 ，900 表 示 最 粗 的 文本 。 另 多 
字体 粗细 为 400，bold 相 关于 700，bolder 相 当 于 比 所 继承 值 更 粗 的 一 个 字体 ， 











继承 值 更 细 的 一 个 字体 。 例 如 下 


<!doctype html> 

<html> 

<head> 

<meta charset="utE=0"> 
<title>6.11</title> 
<style type="text/css"> 
#normalstyle{ 
font-weight:normal; 

$ 

#boldstyle{ 
font-weight:bold; 

} 

#bolderstyle{ 
font-weight:bolder; 


















































图 











6.10 所 示 。 


显示 粗 体 的 文本 。 除 此 之 外 ， 我 们 还 可 以 


还 有 几 种 预定 义 选 项 ， 如 normal 相 当 于 设置 








lighter 相 当 于 比 
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区 

#1lighterstylet{ 

font-weight:1lighter; 

， 

</style> 

</head> 

<body> 

<p id="normalStyle">font-weight 设 置 为 normal 的 效果 </p> 
<p id="boldstyle">font-weight 设 置 为 pold 的 效果 </p> 

<p id="bolderstyle">font-weight 设 置 为 polder 的 效果 </p> 
<p id="lighterstyle">font-weight 设 置 为 lighter 的 效果 </p> 
</body> 

</html> 


在 这 段 代码 中 有 4 个 段落 标记 ， 每 个 段落 都 设置 了 不 同 的 字体 粗细 ， 运 行 这 段 代 码 后 ， 
效果 如 图 6.11 所 示 。 






































ll x 
€ 3 © 3 fle///C/ampp/htdocs/6/6.1L.html 
dr ec HM 


Font-weight 设 置 为 mormal 的 戏 果 


font-weisht 设 置 为 bold 的 效果 
font -meieht 设 置 为 bolder 的 效果 
font-wel ght 设置 为 1ighter 的 效果 








图 6.11 
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为 大 








但 是 只 能 看 到 正常 和 加 粗 两 种 效果 ， 这 是 


由 





虽然 我 们 设置 了 4 种 不 同 的 字体 粗 引 
部 分 浏览 器 只 能 显示 这 两 种 效果 。 


(3) text-transform: 设置 文本 的 大 小 写 状态 。 

text-transform 属 性 的 值 总 共有 5 个 ，capitalize 表 示 首 字母 大 写 ，uppercase 表 示 全 部 大 写 ， 
lowercase 表 示 全 部 小 写 ，none 表 示 正 常 没有 变化 (默认 值 )，inherit 表 示 继 承 其 父 级 对 象 的 
属性 。 该 属性 对 中 文 没有 效果 。 例 如 下 面 这 段 代 码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>6.12</title> 
<style type="text/css"> 
#capitalizestyle{ 
text-transform:capitalize; 
3 

#uppercasestyle{ 
text-transform:uppercase; 
上 

#lowercaseSstyle{ 
text-transform:lowercase; 
} 
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#noneStylef 

text-transform:none; 

#inheritstylet{ 

text-transform:inherit; 

，， 

</style> 

</head> 

<body> 

<p id="capitalizestyle">This is a test. 首 字母 大 写 </p> 
<p id="uppercaseStyle">This is a test .全 部 大 写 </p> 
<p id="lowercaseStyle">This is a test. 全 部 小 写 </p> 
<p id="nonestyle">This is a test .默认 效果 </p> 

<p id="inheritstyle">This is a test .继承 效 果 </p> 
</body> 

</html> 


在 这 段 代 码 中 总 共有 5 个 段落 ， 分 别 设置 了 不 同 的 text-transform 属 性 值 ， 前 3 种 都 对 应 
各 自 的 效果 ， 最 后 两 种 效果 相同 ， 因 为 最 后 一 个 段落 应 用 的 样式 中 ，inherit 对 应 的 父 级 元 素 
body 并 没有 设置 text-transform 属 性 ， 所 以 采用 默认 的 none 值 ， 这 样 它们 的 效果 就 一 样 了 。 运 
行 这 段 代 码 后 ， 效 果 如 图 6.12 所 示 。 
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让 应 用 [0 dreamweaver cc 2.， 癌 HTML 


This Is A Test. 首 字母 大 写 


THIS IS A TEST. 全 部 大 写 
this is a test. 全 部 小 写 
This is a test. 默 认 效果 
This is a test. 继 承 效果 





图 6.12 


(4) text-decoration: 设置 文本 的 修饰 效果 。 
CSS 中 text-decoration 的 属性 值 有 6 个 ， 详 细 说 明 如 表 6.2 所 示 。 





表 6.2 













none 定义 标准 的 文本 〔 上 默认) 

underline 定义 文本 下 的 一 条 线 

overline 定义 文本 上 的 一 条 线 

line-through 定义 穿 过 文本 下 的 一 条 线 

blink 定义 闪烁 的 文本 

inherit 规定 应 该 从 父 元 系 继 承 text-decoration 属 性 的 值 








回 





例如 下 面 这 段 代码 : 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>6.13</title> 
<style type="tezxt/css"> 
hl 
text-decoration:underline; 
总 
h2 
text-decoration:overline; 
, 
h3 
text-decoration:line-through; 
} 
Ph4 
text-decoration:blink 

上 

af 

text-decoration:none; 

3} 

</style> 

</head> 

<body> 

<h1> 下 划 线 效果 </h1> 

<h2> 上 划 线 效果 </h2> 

<h3> 横 穿线 效果 </h3> 

<h4> 闪 烁 效果 </h4> 

<a href="http://www.baidu.com" > 标准 文本 效果 </a> 
</body> 

</html> 


运行 这 段 代 码 后 的 效果 如 图 6.13 所 示 。 闪 烁 效果 因为 使 用 的 很 少 ， 目 前 已 经 没有 浏览 器 
支持 这 个 效果 。 而 HTML 中 的 超 链接 在 默认 情况 下 都 有 一 个 下 划 线 的 效果 ， 为 了 让 页 面 文本 
有 一 个 统一 的 效果 ， 通 常会 使 用 text-decoration:none 取 消 超 链接 的 下 划 线 效果 。 
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下 划 线 效 时 








图 6.13 























(5) font-variant: 设置 小 型 的 大 写字 母 。 
font-variant 属 性 值 有 3 个 ，normal 表 示 标 准 的 字体 ，small-caps 表 示 显 示 小 型 大 写字 母 的 字 
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体 ， 而 inherit 表 示 从 父 元 素 继承 font-variant 属 性 的 值 ， 该 属性 对 中 文 无 效 。 
例如 下 面 这 段 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>6.14</title> 

<style type="text/css"> 

#normalf{ 

font-variant:normal; 

} 

#smallf{ 

font-variant:small-caps; 

下 

</style> 

</head> 

<body> 

<h2 id="normal">This is a test.</h2> 
<h2 id="small">This is a test.</h2> 
</body> 

</html> 


运行 这 段 代 码 后 ， 效 果 如 图 6.14 所 示 。 虽 然 都 是 <h2> 标 记 的 内 容 ， 但 是 第 2 行文 本 都 是 大 
写字 母 ， 除 首 字 母 外 ， 其 他 字母 明显 小 了 很 多 。 




















风 












































614 
< © Dfile///C/xampp/htdocs/6/6.14 html 
洪 应 下 中 dreamweavercc2.， 丫 HTML 


This is a test. 


Tars Is A TEST- 











图 6.14 








(6) letter-spacing 和 word-spacing: 添加 空白 。 

这 两 个 属性 都 用 来 添加 对 应 元 素 的 空白 。letter-spacing 添 加 字母 之 间 的 空白， 而 word- 
spacing 添 加 每 个 单词 之 间 的 空白 。 由 于 word-spacing 修 饰 的 对 象 是 单词 ， 所 以 对 中 文 无 效 。 例 
如 下 面 这 段 代 码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>6.15</title> 
<style type="text/css"> 
#normalf{ 
letter-spacing:normal; 
word-spacing:normal; 

. 
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#letterspacing{ 
letter-spacing:5px; 


站 


#wordspacing{ 
letter-spacing:8px; 


3 


</style> 
</head> 
<body> 


<h2 
<h2 
<h2 


id="normal">This is a test.</h2> 
letterspacing">This is a test.</h2> 
id="wordspacing">This is a test.</h2> 





</body> 
</html> 


运行 


(7) 
以 上 








这 段 代 码 后 ， 效 果 如 图 6.15 所 示 。 
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This is a test. 


This is a test. 


This is a test. 








图 6.15 























font 缩 写 : 使 用 font 属 性 描述 以 上 所 有 的 属性 。 
介绍 的 这 些 文字 排版 属性 ， 都 可 以 使 用 font 属 性 缩写 ， 这 样 可 以 有 效 提 高 CSS 的 书写 





























由 








效率 。 使 














缩写 的 时 候 ， 可 以 参照 以 下 顺序 。 





font:font-style font-variant font-weight font-size[/line-height] font- 


family 


如 果 





不 设置 line-height， 元 素 的 line-height 将 会 默认 为 1， 而 不 会 从 父 级 元 素 或 body 元 素 继 














承 。 使 








6.5.3 


缩写 的 时 候 ， 某 些 选项 可 以 省 略 不 写 ， 但 是 font-size 和 font-family 是 必须 的 。 


通栏 排版 


通栏 排版 是 文字 排版 中 常见 的 一 种 排版 形式 ， 主 要 应 用 于 新 闻 、 法 律 以 及 文字 为 主 的 对 
象 。 通 栏 排版 经 常 使 用 <p> 标 签 、<h1> 到 <h6> 标 签 、<span> 标 签 等 。 将 文字 作为 这 些 标签 的 
















































































内 容 ， 然 后 再 对 段落 文字 应 用 间距 、 行 距 、 字 号 等 样式 控制 ， 例 如 下 面 这 段 代码 : 
<!ldoctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title>6.16</title> 
<style type="text/css"> 


Pi 
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text-indent :2em; 

font-size:16px; 

line-height:1.5em; 

} 

</style> 

</head> 

<body> 

<h1> 司 法 解释 </h1> 

<p> 司 法 解释 ， 法 律 解释 的 一 种 。 属 正式 解释 。 司 法 机 关 对 法 律 、 法 规 的 具体 应 用 问题 所 做 的 说 明 。 
对 某 一 案件 在 适用 法 律 上 所 做 的 解释 ， 只 对 该 案件 有 效 ， 没 有 普遍 约束 力 。 最 高 法 院 所 作 的 解释 ， 对 下 级 
法 院 通常 具有 约束 力 。 违 背 宪 法 与 法 律 的 司法 解释 无 效 。</p> 

<h2> 含 义 </h2> 

<p> 司 法 解释 就 是 依法 有 权 做 出 的 具有 普遍 司法 效力 的 解释 。 广 义 上 是 指 ， 每 一 个 法 官 审理 每 一 起 案 
件 ， 都 要 对 法 律 做 出 理解 ， 然 后 才能 够 具体 适用 。 因 此 ， 必 须 对 法 律 做 出 解释 ， 才 能 做 出 裁判 。 每 一 个 案 
件 都 要 这 样 做 。 由 最 高 法 院 对 具体 适用 法 律 的 问题 ， 作 出 的 解释 就 是 司法 解释 。 

中 国 的 司法 解释 有 时 特 指 由 最 高 人 民法 院 和 最 高 人 民 检 察 院 根据 法 律 赋予 的 职权 ， 对 审判 和 检察 工作 
中 具体 应 用 法 律 所 作 的 具有 普遍 司法 效力 的 解释 。</p> 

<h2> 特 征 </h2> 

<p> 司 法 解释 只 能 由 有 权 机 关 做 出 。 司 法 解释 ， 具 有 普遍 的 司法 效力 ， 有 关 司 法 机 关 在 办 案 中 应 当 
遵照 执行 。 应 该 严格 依法 进行 。 没 有 法 律 具体 明确 规定 的 ， 也 要 严格 依照 法 律 的 精神 和 法 律 的 原则 作出 解 
释 ， 供 审判 工作 中 具体 适用 。 这 就 是 我 们 对 司法 解释 的 一 般 理 解 。</p> 

</body> 

</html> 


在 这 段 代 码 中 ， 我 们 使 用 了 <h2> 和 <p> 标 签 通 栏 排 版 文字 ，<h2> 标 签 排版 标题 内 
容 ，<p> 标 签 用 于 排版 段落 内 容 ， 并 对 <p> 标 签 设置 了 样式 ， 包 括 首 行 缩 进 、 字 体 大 小 和 行 
高 ， 运 行 这 段 代码 后 的 效果 如 图 6.16 所 示 。 
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司法 解释 


司 放 角 短 ， 妇 和 可 的 一 神 ， 所 正式 解 钴 。 司 体 仙 关 对 从 征 、 引 入 县 休 右 站 题 抽 公 的 说 归 ， 对 不 一 表 伯 在 六 
革 律 上 所 仙 的 凡生 ， 只 对 太 案 件 有 获 ， 兴 有 莹 放 约束 力 。 业 法院 所 作 幼 攻 释 ， 对 下 级 法 院 肖 料 具 有 约束 力 。 还 痛 于 法 
与 流入 的 司 引 外 各 无 入 - 


个 入 证 审 理 生 一 起 宁 件 ,和 到 对 法 律 维 
个 泰 人 者 要 这样 议 . 由 甸 训 法院 对 且 
: 渤 民 和 各 襄 人 民 栓 闪 辽 中 将 放 


人 
et ?和 和 有 有 和 的 村 


特征 


可 污 解释 有 能 由 有 明 机 关 合 出 。 表 注解 环 ， 且 有 人 的 届 让 过 力 ， 有 关 司 法 机 关 在 办 案 中 应 当 章 明 执 行 。 应 过 严格 
记 直 进行 。 改 有 站 律 叶 遇 确 类 定 的 ， 也 要 六 属 作 导 法 姑 的 村 入 和 全 全 的 原 则 作出 半 在 ， 供 市 汰 工作 中 具体 关 用 。 这 就 
是 我 们 对 恒生 可 和 的 一 起 理 好 - 

















6.5.4 分 栏 排版 


分 栏 排版 是 指 将 文字 内 容 排列 成 两 栏 或 多 栏 进行 显示 ， 常 见于 报纸 的 排版 形式 。 在 
HIML 中 常用 <div> 元 素来 表示 某 一 个 区 域 ， 如 果 要 分 两 栏 排版 ， 可 以 使 用 两 个 并 排 显示 
的 <div> 元 素 表示 两 个 分 栏 ， 每 个 <div> 元 素 中 的 内 容 就 是 分 栏 显示 的 内 容 。 例 如 下 面 这 
段 代码 : 







































































100 





第 6 章 CSS 基 础 





<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>6.17</title> 

<style type="text/css"> 

Pi 

text-indent :2em; 

font-size:16px; 

line-height:1.5em; 

% 

#1layout{ 

width:600px; 

height:400px; 

margin:0px auto; 

background-color:#C74D4F; 

. 

EDLY 

width:250px; 

padding:10px 25px; 

float:left; 

L 

</style> 

</head> 

<body> 

<div id="layout"> 

<div class=ncolw><h2> 含 义 </h2> 

<p> 司 法 解释 就 是 依法 有 权 做 出 的 具有 普遍 司法 效力 的 解释 。 广 义 上 是 指 ， 每 一 个 法 官 审 理 每 一 起 案 
件 ， 都 要 对 法 律 做 出 理解 ， 然 后 才能 够 具体 适用 。 因 此 ， 必 须 对 法 律 做 出 解释 ， 才 能 做 出 裁判 。 每 一 个 案 
件 都 要 这 样 做 。 由 最 高 法 院 对 具体 适用 法 律 的 问题 ， 作 出 的 解释 就 是 司法 解释 。 中 国 的 司法 解释 有 时 特 指 
由 最 高 人 民法 院 和 最 高 人 民 检 察 院 根据 法 律 赋予 的 职权 ， 对 审判 和 检察 工作 中 具体 应 用 法 律 所 作 的 具有 普 
遍 司法 效力 的 解释 。</p></div> 

<div class="col"><h2> 特 征 </h2> 

<p> 司 法 解释 只 能 由 有 权 机 关 做 出 。 司 法 解释 ， 具 有 普遍 的 司法 效力 ， 有 关 司 法 机 关 在 办 案 中 应 当 
遵照 执行 。 应 该 严格 依法 进行 。 没 有 法 律 具体 明确 规定 的 ， 也 要 严格 依照 法 律 的 精神 和 法 律 的 原则 作出 解 
释 ， 供 审判 工作 中 具体 适用 。 这 就 是 我 们 对 司法 解释 的 一 般 理 解 。</p></div> 

</div> 

</body> 

</html> 


在 这 段 代 码 中 ， 我 们 先 略 去 分 栏 的 内 容 ， 看 一 下 用 <div> 元 素 组 织 的 分 栏 结构 ， 代 码 如 下 
所 示 : 
<div id="layout"> 
<div class="col"></div> 
<div class="col"></div> 
</div> 
这 是 一 个 <div> 元 素 内 嵌 了 两 个 <div> 元 素 ， 内 嵌 的 两 个 <div> 元 素 就 是 分 栏 的 结构 。 通 
过 id 选择 器 设置 了 外 层 <div> 元 素 的 宽度 和 高 度 ，margin:0px auto 表 示 上 下 外 边 距 为 0， 左 
右 外 边 距 自动 分 配 ， 并 设置 了 背景 颜色 。 通 过 class 选 择 器 设置 了 内 层 <div> 元 素 的 宽度 ， 
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padding:10px 25px 表 示 上 下 内 边 距 为 10px， 左 右 内 边 距 为 25px。 重 
向 左 浮动 ， 这 样 就 形成 了 分 栏 效果 。 运 行 这 段 代码 后 ， 效 果 如 








foat:left 表 示 这 两 个 <div> 元 素 





图 6.17 所 示 。 
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6.5.5 图 文 混合 排版 


























天 像 和 文本 是 HTML 页 











1 吕 

















CSS 的 功能 之 一 。 例 如 ， 我 们 
示 : 
<!doctype html> 


<html> 
<head> 


将 


<meta charset="utf-8"> 


<title>6.18</title> 


经 常会 同时 出 现 的 两 个 
像 放 在 一 个 <div> 元 素 上 

















<style type="text/css"> 


pt{ 

text-indent :2em; 
font-size:16px; 
line-height:1.5em; 
} 

#1layout{ 
width:600px; 
height:400px; 
margin:0px auto; 


background-color:#C74D4F; 


.» 

</style> 

</head> 

<body> 

<div id="layout"> 


<h1> 司 法 解释 </h1> 








内 容 ， 处 理 图 像 和 
h， 然 后 插入 到 页 面 











本 的 排版 也 是 
Ph， 代 码 如 下 所 





<div class="Rimg"><img src="img/img01.jpg" width="40%" height="40%"></div> 
<p> 司 法 解释 ， 法 律 解释 的 一 种 。 属 正式 解释 。 司 法 机 关 对 法 律 、 法 规 的 具体 应 用 问题 所 做 的 说 明 。 对 某 一 
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案件 在 适用 法 律 上 所 做 的 解释 ， 只 对 该 案件 有 效 ， 没 有 普遍 约束 力 。 最 高 法 院 所 作 的 解释 ， 对 下 级 法 院 通 
常 具 有 约束 力 。 违 背 宪 法 与 法 律 的 司法 解释 无 效 。</p> 

</div> 

</body> 

</html> 








这 上 段 代码 只 是 对 插入 的 图 片 大 小 进行 了 缩放 ， 其 他 样式 都 没有 改变 ， 运 行 这 段 代 码 后 的 
效果 如 图 6.18 所 示 。 














-En 


€ 3 © DlocalhosVResource/ 








图 6.18 
































如 果 要 将 插入 的 图 片 显示 在 中 间 位 置 ， 可 以 添加 以 下 样式 : 


.Rimg{ 
text-align:center; 
} 


刷新 页 面 后 的 效果 如 图 6.19 所 示 。 
































€ 3 © Dfile/champp/htdocs/s/6.18html 
泣 全 【deveeercei I Mr 








图 6.19 















































另外 ， 图 文 混 排 效 果 还 可 以 将 文字 环绕 在 图 像 周围 ， 这 就 需要 添加 以 下 代码 : 
img{ 

float:left; 

padding:10px; 

} 





103 





QQ、 | 网 站 制作 、 发 布 与 维护 技术 实战 

















刷新 页 面 后 ， 效 果 如 图 6.20 所 示 。 




















fey//C rampp/htdocs/e/6.18 html 
cr Ie 


EN 


6.5.6 不 规则 文字 环绕 





到 6.20 























CSS 中 的 float 属 性 可 以 影响 周 





转 














元 素 的 排列 方式 ， 





像 和 文字 不 规则 的 环绕 效果 。 例 如 下 面 这 段 代码 ; 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>6.19</title> 
<style type="text/css"> 
人 

margin:0; 

padding:0; 
color:#972E30; 
font-size:14px; 
font-weight:bold; 

上 

#content { 

















background: url(img/img02.jpg) no-repeat; 


.blank { 

float: left; 

clear: left; 
margin: 0px 25px Opx Opx; 
font-size: 9px; 
height:16px 

上 

</style> 

</head> 

<body> 

<div id="content"> 











这 一 特性 ， 我 们 就 可 以 制作 出 
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<div class="blank" style="width: 
<div class="blank" style="width: 
<div class="blank" style="width: 
<div class="blank" style="width: 
<div class="blank" style="width: 
<div class="blank" style="width: 
<div class="blank" style="width: 
:364px 
<div class="blank" style="width: 


<div class="blank" style="width 


不 <br> 
规 <br> 
则 <br> 
文 <br> 
字 <br> 
环 <br> 
绕 <br> 
效 <br> 
果 <br> 
</div> 
</body> 
</html> 

















420px; 
406px; 
395px; 
384px; 
375pzx; 


370pzx 
360px 


361px 


在 这 段 代码 中 ， 外 层 的 <div> 元 素 作 为 一 个 大 容器 ， 
先 在 样式 中 通过 通配符 选择 器 设置 所 有 内 外 边 距 为 0， 并 设置 颜 
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"></div> 
"></div> 
"></div> 
"></div> 
></diy> 
zx</[dav> 
2"></div> 
</div> 
SLY> 


内 嵌 了 很 多 <div> 元 素 和 文字 。 首 











、 字 号 和 加 粗 效果 ， 然 


J 


通过 id 选择 器 设置 外 层 <div> 的 背景 图 像 ， 最 后 通过 class 选 择 器 设置 内 嵌 的 <div> 元 素 向 左 浮 
动 ， 并 及 时 清理 浮动 。 设 置 <div> 元 素 的 右边 距 为 25px， 字 号 大 小 为 9px， 高 度 为 16px， 这 样 





设置 后 ， 所 有 内 嵌 的 <div> 元 素 与 图 像 就 会 浮动 起 来 。 最 后 














也 是 关键 的 一 步 ， 通 过 行 间 样 式 表 


设置 每 个 内 嵌 <div> 的 宽度 ， 这 样 就 可 以 控制 环绕 文字 距离 左边 距 的 距离 ， 达 到 不 规则 的 效 














果 。 运 行 这 段 代 码 后 的 效果 如 图 6.21 所 示 。 





6.5.7 全 图 混 排 











全 图 混 排 通常 会 应 用 于 相册 类 的 页 面 中 ， 将 很 多 张 图 像 在 一 个 页 面 内 集中 


面 







































































全 图 混 排 效果 时 ， 我 们 仍然 需要 用 float 这 个 属性 。 例 如 以 下 HIMI 页 




















<!ldoctype html> 
<html> 
<head> 














代码 : 








展示 ， 在 设置 
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<meta charset="utf-8"> 
<title>6.20</title> 
</head> 
<body> 
<div id="content"> 
<div> 
<img src="img/yx01.png"> 
<h2> 一 休 </h2> 
<p> 本 名 千 菊 丸 ， 是 日 本 幕府 时 期 小 松 天 皇 的 儿子 ， 由 于 战乱 被 母亲 从 小 送 进 安国 寺 修 
行 ， 法 名 一 休 宗 纯 。 本 性 善良 ， 乐 于 助人 ， 而 且 同 样 具有 小 孩子 的 顽皮 和 狂 独 ， 在 全 片 中 亦 是 正义 的 化 
下 让 全 
</div> 
<div> 
<img src="img/yx02.png"> 
<h2> 小 叶子 </h2> 
<P> 居 住 在 安国 寺 附 近 的 小 女孩 ， 活 泼 可 爱 ， 心 地 善良 ， 和 和 爷爷 相依 为 命 ， 经 常 出 入 安 
寺 ， 对 一 休 有 一 份 真挚 特殊 的 感情 。</P> 
</div> 
<div> 
<img src="img/yx03.png"> 
<h2> 赚 川 新 佑 卫 门 </h2> 
<p> 日 本 武士 兼 地 方 官 ， 武 艺 高 强 ， 剑 术 超 群 ， 同 样 是 正义 的 代表 ， 严 肃 起 来 大 义 凉 然 ， 
威严 无 比 ， 不 严肃 时 又 象 个 小 孩子 。</p> 
</div> 
<div> 
<img src="img/yx04.png"> 
<h2> 足 利 义 满 将 军 </h2> 
<p> 就 是 个 大 孩子 ， 性 情 喜 怒 无 常 ， 自 身 养 尊 处 优 、 四 体 不 勤 、 五 谷 不 分 ， 而 且 经 常 提 很 
多 无 理 要 求 为 难 下 属 和 百姓 。</p> 
</div> 
<div> 
<img src="img/yx05.png"> 
<h2> 弥 生 小 姐 </h2> 
<p> 村 梗 店 老板 的 女儿 ， 有 钱 人 家 的 大 小 姐 ， 为 人 傲慢 、 骄 横 ， 和 父亲 一 起 总 是 以 各 种 方 
式 刁 难 一 休 ， 遇 到 困难 又 总 是 来 户 求 一 休 帮 忙 。 最 大 的 乐趣 就 是 看 到 一 休 出 丑 。< /p> 
































</div> 
<div> 
<img src="img/yx06.png"> 
<h2> 长 老 </h2> 
<p> 本 名 外 鉴 ， 是 安国 寺 的 主持 ， 和 德高望重， 慈悲 为 怀 ， 对 弟子 要 求 十 分 严厉 。</p> 
</div> 
</div> 
</body> 
</html> 





网 
Ey 











在 这 段 代 码 中 ， 最 外 边 的 <div> 元 素 作 为 主 容 器 ， 内 嵌 的 <div> 元 素 中 又 分 别 内 嵌 了 
<img>、 标 题 <h2> 和 段落 <p> 元 素 ， 没 有 设置 任何 样式 的 效果 如 图 6.22 所 示 。 
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到 6.22 











首先 为 内 典 的 <div> 元 素 设置 样式 ， 相 关 代 码 如 下 


#content divt{ 
border:solid lpx #37662C; 
float:left; 

margin:S5px; 

padding:3px; 

width:400px; 

height :300px; 
text-align:center; 
overflow:hidden; 





























在 这 段 代码 中 ， 首 先 设置 了 <div> 元 素 的 边框 ， 使 用 float 属 性 让 <div> 元 素 向 左 浮动 ， 然 





后 设置 内 外 边 距 ， 以 及 <div> 元 素 的 宽度 和 高 度 ， 使 用 text-align:center 属 性 设置 内 容 居中 显 
































并 使 用 overflow:hidden 属 性 设置 隐藏 超出 的 内 容 。 刷 新 页 面 





























后 效果 如 图 6.23 所 示 。 








图 6.23 





























像样 式 ， 相 关 代 码 如 下 ， 刷 新 页 








下 面 设置 <div> 元 素 中 的 








区 








#content div imgt{ 





机 后 的 效果 如 








网 











6.24 所 示 。 
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width:260px; 
height:180px; 
; 


二 了 E/Tampp/ edocWs/S 20 mm 
a ree CH 





妊 川 新 佑 卫 门 
8 


ee 
和 fc 林产 所 订 大 久生 杂 和 不 天 二 时 允 思 个 小 


RN Em 人 
和 meg ep 和 

































最 后 设置 <div> 元 素 中 段落 的 样式 ， 相 关 代码 如 下 ;: 


#content div pt{ 
font-size:10px; 
text-indent:2em; 
text-align:1left; 

















这 里 设置 段落 中 的 字号 为 10px， 首 行 缩 进 两 个 字符 ， 间 
后 的 效果 如 图 6.25 所 示 。 





Ff 让 段落 文本 居 左 对 齐 ， 刷 新 页 面 




















星川 新 佑 卫 门 


ee 





a 


,ste ee a eet 

















6.5.8 表格 和 边框 

















如 今 大 家 都 习惯 了 使 用 DIV+CSS 布 
式 。 下 




















I 














局 页 面 ， 其 实 Table+CSS 曾 经 也 是 流行 的 页 面 布 局 方 
我 们 详细 介绍 CSS 样 式 如 何 美化 表格 和 边框 的 外 观 。 











回 
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(1) 表格 边框 :使 用 border 属 性 可 以 设置 表格 的 边框 。 例 如 下 面 这 段 代码 ， 使 用 border 
属性 设置 了 <table>、<th> 和 <td> 的 边框 属性 ， 效 果 如 图 6.26 所 示 。 


<!ldoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>6.21</title> 
<style type="text/css"> 
table, th, ta{ 
border:solid lpx #3F0COD; 
这 
</style> 
</head> 
<body> 
<table> 
<tr> 
<th> 表 头 </th> 
<th> 表 头 </th> 
<th> 表 头 </th> 
过/ 六 
KE 














<td> 表 格 的 内 容 </td> 
<td> 表 格 的 内 容 </td> 
<td> 表 格 的 内 容 </td> 


区 太太 
</table> 
</body> 
</html> 

















(2) 折 翅 边框 :使 用 border-collapse 属 性 设置 是 否 将 表格 边框 折 芭 为 单一 边框 。 如 图 6.26 








所 示 ， 虽 然 给 表格 添加 了 边框 ， 但 




















是 显示 的 是 多 个 边框 ， 其 中 包括 了 表格 边框 、 表 头 边框 和 














单元 格 边框 。 如 果 为 表格 添加 下 面 
图 6.27 所 示 。 


七 ablet{ 
border-collapse:collapse; 




















让 fileVWCYxamppyhtdocsy6/62Lhtml 
拭 直 四 站 dreamweaver ee 2 DJ ATML 





















































素 天 | 表 关 
区 税 的 内 容 医术 的 具 守 | 














图 6.26 








的 样式 ， 就 可 以 将 表格 的 边框 显示 为 单一 的 边框 ， 效 果 如 





© filey//C/xampp/htdocs/6/6.21.html 
dreamweaver 2.. I HIML 














EE 龙头 
蒜 梅 的 内 容 未 格 的 内 容 











图 6.27 














(3) 表格 的 宽度 和 高 度 : 通过 width 和 height 属 性 设置 表格 的 宽度 和 高 度 。 
(4) 表格 文本 对 齐 : 使 用 text-align 和 vertical-align 属 性 设置 表格 中 文本 的 对 齐 方式 。 使 





















































出 
































text-align 属 性 设置 水 平 对 齐 方式 ， 如 左 对 齐 、 右 对 齐 或 者 居中 ; 使 用 vertical-align 属 性 设置 
垂直 对 齐 方式 ， 如 项 部 对 齐 、 底 部 对 齐 或 居中 对 齐 。 

















(5) 表格 内 边 距 : 使 用 padding 属 性 可 以 设置 表格 内 边 距 。 例 如 下 面 这 段 代码 ， 表 头 内 
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tht{ 
padding:5px; 
七 G{ 
padding:10px; 
了 





边 距 为 5px， 单 元 格 内 边 距 为 10px， 效 果 如 图 6.28 所 示 。 











mpp/htdocs/6/5.21.html 


Cm 





表 头 表 拓 

















表格 的 内 容 | 表格 的 内 容 





到 6.28 











(6) 表格 的 颜色 : 表格 中 边框 的 颜色 通过 border 属 性 进行 设置 ， 表 格 中 文本 的 颜色 通过 color 











<!doctype html> 
<html> 
<head> 
<meta charset="utf=8"> 
<title>6.21</title> 
<style type="text/css"> 
table{ 
border-collapse:collapse; 
table,th,tdf 
border:solid lpx #3F0COD; 
. 
七 h{ 
padding:5px; 
background-color:#9F761C; 
color:white; 
3 
tat 
padding:10px; 
background-color:#C2B6D4; 
color:#233673; 
上 
</style> 
</head> 
<body> 
<table> 
<Er> 
<th> 表 头 </th> 
<th> 表 头 </th> 
<th> 表 头 </th> 
Er 
<tr> 
<td> 表 格 的 内 容 </td> 
<td> 表 格 的 内 容 </td> 











属性 进行 设置 ， 表 格 中 背景 的 颜色 通过 background-color 属 性 进行 设置 。 例 如 下 面 这 段 代码 : 
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<td> 表 格 的 内 容 </td> 
CT 
</table> 
</body> 
</html> 


在 这 段 代 码 中 ， 分 别 对 表 头 的 背景 色 、 单 元 格 的 背景 色 、 表 头 字体 颜色 和 单元 格 字体 颜 
色 ， 以 及 边框 颜色 进行 了 设置 。 运 行 后 的 效果 如 图 6.29 所 示 。 





























€ 3 CG 9 fie//c/xampp/htdocs/6/6.21.html 
这 应 用 [dreamweaver cc2.。 品 HTML 











6.29 

















(7) 边框 样式 ， 样 式 是 边框 最 重要 的 一 个 方面 ， 因 为 如 果 不 设置 边框 样式 ， 将 无 法 显 
示 边 框 。 在 CSS 中 可 以 通过 border-style 属 性 设置 10 种 不 同 的 边框 样式 ， 这 10 种 边框 样式 如 表 
6.3 所 示 。 




















表 6.3 



























none 定义 无 边框 

hidden 与 “none” 相 同 。 不 过 应 用 于 表 时 除外 ， 对 于 表 ，hidden 用 于 解决 边框 冲突 
dotted 定义 点 状 边框 。 在 大 多 数 浏览 器 中 呈现 为 实 线 

dashed 定义 虚线 。 在 大 多 数 浏览 器 中 呈现 为 实 线 

solid 定义 实 线 

double 定义 双 线 。 双 线 的 宽度 等 于 border-width 的 值 

groove 定义 3D 四 槽 边框 。 其 效果 取决 于 border-color 的 值 

ridge 定义 3D 礁 状 边框 。 其 效果 取决 于 border-color 的 值 

inset 定义 3D inset 边 框 。 其 效果 取决 于 border-color 的 值 

outset 定义 3D outset 边 框 。 其 效果 取决 于 border-color 的 值 


inherit 规定 应 该 从 父 元 票 继承 边框 样式 





如 图 6.30 所 示 为 部 分 边框 样式 效果 。 
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AH 一 


6.6 制作 预览 幻灯 片 


























本 节 将 使 用 前 面 学 习 到 的 知识 ， 使 用 CSS 制 作 一 个 具有 预览 功能 的 幻灯 片 ， 效 果 如 图 
6.31 所 示 。 将 鼠标 悬 停 在 左边 或 者 右边 的 图 片上 时 ， 原 来 显示 一 半 的 图 片 就 会 全 部 显示 出 
来 ， 当 点 击 鼠 标 时 ， 可 以 跳 转 到 下 一 个 图 片 。 详 细 的 制作 步骤 如 下 
































| 





























GE 
€ 3 C TENNCNampp/htdocye623html 
tore 四 mm 








图 6.31 











回首 先 准备 10 张 尺寸 一 样 的 图 片 ， 分 别 为 它们 编号 从 pic1 到 pic10。 
加 新 建 一 个 HTML 页 面 ， 组 织 页 面 结构 ， 相 关 代码 如 下 所 示 ; 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<div id="gallery"> 
<div id="fullsize"> 
<div id="picl"> 
<img src="img/picl.jpg" alt="Winter branches" /> 
<a class="previous" href="#picl0"> 
<img src="img/picl0.jpg" alt="Trees in the mist" /> 
</a> 
<a class="next" href="#pic2"> 
<img src="img/pic2.jpg" alt="Wading birds" /> 


</a> 
<h3>Winter branches</h3> 
</div> 
</div> 
</div> 
</body> 
</html> 
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在 这 段 代 码 中 ， 使 用 了 3 层 嵌 套 的 div， 最 外 边 一 层 div 用 于 设置 幻灯 片场 景 ， 中 间 的 一 层 
div 用 于 切换 幻灯 片 时 固定 位 置 ， 最 内 层 的 div 用 于 显示 图 片 和 标题 。 最 内 层 的 3 张 图 片 中 ， 第 
1 张 图 片 是 当前 显示 的 幻灯 片 ， 第 2 张 图 片 是 前 一 次 显示 的 幻灯 片 ， 第 3 张 图 片 是 下 一 次 显示 
的 幻灯 片 。 这 里 使 用 锚 点 切换 每 组 图 片 显示 的 位 置 ， 后 面 还 会 在 第 3 次 div 的 下 面 依次 添加 其 
他 各 组 图 片 。 这 段 代 码 在 浏览 器 中 的 显示 效果 如 图 6.32 所 示 。 
































































































































































































































图 6.32 











园 首先 设置 最 外 层 div 的 样式 ， 分 别 指定 它 的 宽度 和 高 度 ; 设置 margin 属 性 上 下 为 0， 左 
右 自 适应 ， 可 以 将 图 片 左 右 居 中 显示 ; 使 用 font-family 属 性 设置 页 面 字体 ;使 用 background 属 
性 设置 背景 色 ， 最 后 设置 div 的 上 下 边框 效果 。 相 关 代 码 如 下 所 示 : 


#gallery { 

width: 750px; 

height: 500px; 

margin: 0 auto; 

font-family: verdana, arial, sans-serif; 
background: #f8f8f8; 

border-top: lpx solid #ddd; 
border-bottom: lpx solid #ddd; 

了 


刷新 浏览 器 后 的 效果 如 图 6.33 所 示 。 


国 通过 以 上 设置 ， 可 以 看 到 原本 横向 排列 的 3 张 图 片 ， 由 于 设置 了 div 容 器 的 尺寸 ， 无 法 
横向 排列 后 自动 变 为 竖 向 排列 ， 且 3 张 图 片 超出 了 背景 区 域 。 为 了 让 图 片 局 限 在 背景 区 域 中 
显示 ， 我 们 需要 将 超出 边框 的 图 片 隐藏 起 来 ， 相 关 设 置 如 下 所 示 : 


#gallery #fullsize { 
height: 500px; 
width: 750px; 
overflow: hidden; 
text-align: center; 
二 























外 层 div 设 置 了 相对 定位 ， 且 左右 方向 上 居中 显示 ， 所 以 在 这 段 代 码 中 ， 首 先 设置 该 
div 与 外 层 div 的 尺寸 相同 ， 然 后 设置 overlow 属 性 为 hidden， 将 超出 div 边 框 的 内 容 隐 藏 起 来 ， 
最 后 设置 text-align 属 性 为 center， 将 图 片 在 这 个 div 中 居中 显示 。 刷 新 浏览 器 后 的 效果 如 图 6.34 
所 示 。 
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图 6.34 


贺 最 内 层 的 div， 我 们 需要 设置 其 宽度 与 外 边 的 div 相 同 ， 高 度 可 以 适当 的 高 出 一 些 ， 因 
为 超出 边框 的 部 分 会 被 隐藏 。 为 了 让 幻灯 片 显 示 的 更 美观 一 些 ， 需 要 给 图 片 设置 一 定 的 内 边 
距 ， 这 里 设置 为 20 个 像素 ， 最 后 设置 position 属 性 为 relative。 相 关 代码 如 下 所 示 : 


#gallery #fullsize div { 
Width 150 

height: 700px; 
padding-top: 20px; 
position: relative; 

; 


刷新 页 














团 


后 的 效果 如 图 6.35 所 示 。 
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EEE * 
€ 3 © D0 fle//Champp/htidocs/6/6.23.html 


me 口 Hmwt 

















国 为 div 中 的 图 片 设置 一 个 10 像 素 的 边框 ， 并 设置 颜色 ;设置 Position 属性 为 relative; 最 
后 设置 zindex 属 性 为 500。 此 处 设置 元 素 的 扒 释 属性 ， 是 为 了 后 面 凸显 小 图 片 效果 做 铺垫 。 相 
关 代码 如 下 所 示 : 


#gallery #fullsize div img { 
border: 10px solid #fff; 
position: relative; 

z-index: 500; 

, 


刷新 浏览 器 后 的 效果 如 图 6.36 所 示 ， 该 效果 与 上 图 的 主要 区 别 在 于 图 片 的 边框 。 
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图 6.36 


目前 这 3 张 图 片 还 是 垂直 排列 在 一 起 ， 并 且 超 出 外 层 div 的 图 片 都 被 隐藏 起 来 。 为 了 
能 让 后 两 张 图 片 分 别 显示 在 第 1 张 图 片 的 左右 两 边 ， 这 里 需要 将 position 属 性 设置 为 absolute， 
在 绝对 定位 的 作用 下 ， 分 别 设置 超 链接 的 left 和 right 属 性 为 10， 然 后 设置 top 属 性 为 200， 更 改 
Z-index 属 性 为 10， 这 样 这 两 张 图 片 就 与 第 1 张 图 片 扒 重 显 示 ， 并 置 于 第 1 张 图 片 的 后 面 ， 相 关 
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代码 如 下 所 示 : 
#gallery #fullsize a.previous 
position: absolute; 
left: 10px; 
top: 200px; 
z-index: 10; 
3 
#gallery #fullsize a.next { 
position: absolute; 
right: 1l0px; 
top: 200px; 
z-index: 10; 
. 


刷新 浏览 器 后 的 效果 如 图 6.37 所 示 。 


一 
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图 6.37 


国 接 下 来 需要 重新 设置 左右 两 张 图 片 的 尺寸 ， 并 为 图 片 设置 一 个 滤 镜 效果 ， 相 关 代码 
如 下 : 


#gallery #fullsize a.previous img, #gallery #fullsize a.next img { 
width: 180px; 

height: 120px; 

filter: alpha (opacity=40); 

opacity: 0.4; 

} 


刷新 浏览 器 后 的 效果 如 图 6.38 所 示 。 


国 整个 幻灯 片 的 结构 已 经 完成 ， 接 下 来 需要 为 其 添加 一 些 动画 效果 。 当 和 鼠标 是 停 在 超 
链接 上 时 ， 更 改 超 链接 的 z-index 属 性 ， 让 图 片 呈现 在 幻灯 片 的 前 面 ， 并 更 改 图 片 的 滤 镜 效 
果 ， 相 关 代码 如 下 所 示 : 


#gallery #fullsize a:hover { 
z-index: 600; 
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#gallery #fullsize a:hover img { 
filter: alpha (opacity=80); 
opacity: 0.8; 


上 
刷新 浏览 器 








后 ， 将 鼠标 悬 停 到 小 图 片上 的 效果 如 图 6.39 所 示 。 











Es PD 
€ 3 © OD fle//Cmampp/htidocs/6/6.23 htmlspics 
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Winter branches 





图 6.38 
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图 6.39 


四 最 后 ， 为 页 面 添加 其 他 的 div， 当 点 击 超 链接 的 图 片 时 ， 通 过 锚 点 定位 到 指定 的 div， 
这 样 就 形成 了 有 预览 功能 的 幻灯 片 效 果 ， 完 整 的 HTML 代 码 如 下 所 示 。 


<!ldoctype html> 


<html> 
<head> 


<meta charset="utf-8"> 


<title> 无 标题 文档 </title> 


<style> 
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</style> 
</head> 
<body> 
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<div id="gallery"> 
<div id="fullsize"> 
<div id="picl”> 


<img src="img/picl.jpg" alt="Winter branches" /> 
<a class="previous" href="#picl0"> 
<img src="img/picl0.jpg" alt="Trees in the mist" /> 
</a> 
<a class="next" href="#pic2"> 
<img src="img/pic2.jpg" alt="Wading birds" /> 
</a> 
<h3>Winter branches</h3> 
</div> 
<div id="pic2"> 
<img src="img/pic2.jpg" alt="Wading birds" /> 
<a class="previous" href="#picl"> 
<img src="img/picl.jpg" alt="Winter branches" /> 
</a> 
<a class="next" href="#pic3"> 
<img src="img/pic3.jpg" alt="Bird on a post" /> 
</a> 
<h3>Wading birds</h3> 
</div> 
<div id="pic3"> 
<img src="img/pic3.jpg" alt="Bird on a post" /> 
<a class="previous" href="#pic2"> 
<img src="img/pic2.jpg" alt="Wading birds" /> 
</a> 
<a class="next" href="#pic4"> 
<img src="img/pic4.jpg" alt="Early bloomers" /> 
</a> 
<h3>Bird on a post</h3> 
</div> 
<div id="pic4"> 
<img src="img/pic4.jpg" alt="Early bloomers" /> 
<a class="previous" href="#pic3"> 
<img src="img/pic3.jpg" alt="Bird on a post" /> 
</a> 
<a class="next" href="#pic5"> 
<img src="img/pic5.jpg" alt="Green lizard" /> 
</a> 
<h3>Early bloomers</h3> 
</div> 
<div id="pic5"> 
<img src="img/pic5.jpg" alt="Green lizard" /> 
<a class="previous" href="#pic4"> 
<img src="img/pic4.jpg" alt="Early bloomers" /> 
</a> 
<a class="next" href="#pic6"> 
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<img src="img/pic6.jpg" alt="Feeding the birds" /> 
</a> 
<h3>Green lizard</h3> 
</div> 
<div id="pic6"> 
<img src="img/pic6.jpg" alt="Feeding the birds" /> 
<a class="previous" href="#pic5"> 
<img src="img/pic5.jpg" alt="Green lizard" /> 
</a> 
<a class="next" href="#pic7"> 
<img src="img/pic7.jpg" alt="A group of butterflies" /> 
</a> 
<h3>Feeding the birds</h3> 
</div> 
<div id="pic7"> 
<img src="img/pic7.jpg" alt="A group of butterfies" /> 
<a class="previous" href="#pic6"> 
<img src="img/pic6.jpg" alt="Feeding the birds" /> 
</a> 
<a class="next" href="#pic8"> 
<img src="img/pic8.jpg" alt="Ladybirds" /> 
</a> 
<h3>A group of butterflies</h3> 
</div> 
<div id="pic8"> 
<img src="img/pic8.jpg" alt="Ladybirds" /> 
<a class="previous" href="#pic7"> 
<img src="img/pic7.jpg" alt="A group of butterflies" /> 
</a> 
<a class="next" href="#pic9"> 





<img src="img/pic9.jpg" alt="Butterfly" /> 
</a> 
<h3>Ladybirds</h3> 
</div> 


<div id="pic9"> 
<img src="img/pic9.jpg" alt="Butterfly" /> 
<a class="previous" href="#pic8"> 
<img src="img/pic8.jpg" alt="Ladybirds" /> 
</a> 
<a class="next" href="#picl0"> 
<img src="img/picl0.jpg" alt="Trees in the mist" /> 
</a> 
<h3>Butterfly</h3> 
</div> 
<div id="picl10"> 
<img src="img/picl0.jpg" alt="Trees in the mist" /> 
<a class="previous" href="#pic9"> 
<img src="img/pic9.jpg" alt="Butterfly" /> 
</a> 
<a class="next" href="#picl"> 
<img src="img/picl.jpg" alt="Winter branches" /> 
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第 7 章 DIV+CSS 布 局 























目前 主流 的 布局 方式 就 是 DIV+CSS 布 局 ， 这 种 布 
好 处 ， 比 如 有 利于 搜索 引擎 优化 、 代 码 精 简 、 提 高 加 载 速度 、 样 式 便于 操作 














局 方式 与 以 前 的 table 布 





局 相 比 有 很 多 的 























等 等 。 本 章 就 开始 介绍 如 何 使 用 DIV+CSS 来 布 














在 1 理解 CSS 与 DIV 定位 

















素 的 定位 ， 然 后 看 一 下 如 何 给 图 片 签名 








7.1.1 div 与 span 标 记 






































对 页 面 产 生 任何 效果 。 














在 HIMIL 页 面 中 ，div 和 span 标 记 都 可 以 看 做 是 
如 果 标 记 中 没有 内 容 ， 那 么 这 两 个 标记 可 以 看 做 是 空 标记 ， 在 HIML 页 面 f 





局 我 们 的 网 页 。 


在 学 习 DIV+CSS 布 局 之 前 ， 我 们 先 来 看 一 些 基本 概念 ， 例 如 对 盒子 模型 


、 网 页 便于 维护 


的 详细 介绍 和 元 

















个 盒子 ， 盒 子 中 内 容 可 























以 是 任意 元 素 。 


插入 空 标记 不 会 














通常 情况 下 ，div 元 素 被 称 为 块 元 素 ， 而 span 元 素 被 称 为 内 榜 元 素 。 这 是 因为 在 没有 设 























置 样式 的 情况 下 ，div 元 素 需 要 单独 占 























行 ， 即 使 div 元 素 中 只 有 一 个 字符 








， 也 单独 占 
































。 例 如 下 面 这 段 代码 ， 可 以 非常 直观 地 




















行 ，span 元 素 则 根据 内 容 的 多 少 决定 占用 多 宽 的 距离 
展示 div 元 素 和 span 元 素 在 这 方面 的 区 别 ， 效 果 如 图 7.1 所 示 。 























<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>7.1</title> 
<style type="text/css"> 
divt{ 

border:solid lpx #470A0B; 
margin-bottom:10px; 

时 

spant{ 

border:solid lpx #2927D7; 











} 

</style> 

</head> 

<body> 

<div>div 中 的 内 容 </div> 
<span>span 中 的 内 容 </span> 
</body> 

</html> 


CC © file///C:/xampp/htdocs/7/7.L.html 
游 应 用 0 dreamweaver cc2.， 癌 HTML 





第 7 章 DIV+CSS 布 局 











应 > 中 的 内 容 




















加 mm 中 的 丙 守 



































素 ; 如 果 设 置 成 inline， 则 该 元 素 就 是 一 个 内 








图 7.1 











CSS 样 式 设置 转换 器 特点 ， 例 如 下 面 这 段 代码 : 











<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>7.2</title> 
<style type="text/css"> 
divt{ 

border:solid lpx #470A0B; 
display:inline; 

; 

spant{ 

border:solid lpx #2927D7; 
display:block; 
margin-top:10px; 

:; 

</style> 

</head> 

<body> 

<div>qdiv 中 的 内 容 </div> 
<span>span 中 的 内 容 </span> 
</body> 

</html> 














在 HTML 中 还 有 很 多 块 级 元 素 ， 它 们 都 有 一 个 共同 的 特点 ， 那 就 是 单独 占用 一 行 。 
个 特点 由 display 属 性 进行 设置 ， 如 果 display 属 性 设置 为 blockk， 则 该 元 素 就 是 一 个 块 级 元 
能 元 素 。 所 以 ，div 元 素 和 span 元 素 还 可 以 通过 














它们 


在 这 段 代码 中 ， 我 们 将 div 元 素 的 display 属 性 设置 为 inline， 将 span 元 素 的 display 属 性 设置 





























为 block。 运 行 这 段 代 码 后 ， 我 们 会 发 现 div 元 素 不 再 单独 占用 一 行 ， 而 是 根据 div 元 素 上 


的 宽 
































度 进行 缩放 ， 而 span 元 素 则 单独 占 











了 一 行 ， 效 果 如 





图 7.2 所 示 。 








Ph 内容 
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7.1.2 盒子 模型 








盒子 模型 是 CSS 中 一 个 重要 的 概念 ， 理 解 了 盒子 模型 才能 更 好 地 进行 布局 。 盒 子 模型 指 
定 了 元 素 如 何 显示 以 及 如 何 相 互 交互 ， 页 面 中 所 有 元 素 都 可 以 看 成 一 个 盒子 。 一 个 页 面 就 是 








很 多 个 这 样 的 盒子 组 成 ， 这 些 盒 子 之 间 会 相互 影响 ， 共 同 构 成 复杂 的 页 面 效 果 。 
在 CSS 中 ， 一 个 独立 的 盒子 模型 由 margin (外 边 距 ) 、border (边框 ) 、padding (内 边 
距 ) 、content (内 容 ) 4 个 部 分 组 成 ， 如 图 7.3 所 示 。 







































































margin-top 


margin-left 
JSTI-UTSIEm 





margin-bottom 


1. 外 边 距 


外 边 距 是 指 容器 边框 以 外 的 区 域 ， 经 常 设置 两 个 元 素 之 间 的 距离 。 在 CSS 中 可 以 
使 用 margin-top、margin-bottom、margin- left 和 和 margin-right 属 性 分 别 设置 外 边 距 上 下 左右 的 
距离 ， 还 可 以 使 用 margin 属 性 按照 上 、 右 、 下 、 左 的 顺序 依次 设置 外 边 距 。 例 如 下 面 这 段 
代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-—8"> 
<title>7.3</title> 
<style type="text/css"> 
| 

margin:0; 

divt{ 

color:white; 
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background-color:#843637; 
BE 

</style> 

</head> 

<body> 

<qdiv> 外 边 距 </div> 

</body> 

</html> 


在 这 段 代 码 中 ， 只 有 一 个 div 元 素 ， 首 先 使 用 通用 选择 器 清除 页 面 外 边 距 ， 然 后 设置 div 
元 素 中 文本 的 样式 和 背景 色 ， 运 行 这 段 代码 后 ， 效 果 如 图 7.4 所 示 。 












































四 73 


和 © fie///c/xampp/htdocs/7/7.3.html 
江东 风口 dreemweevercc2-， 加 HTML 








7.4 














可 以 看 到 ， 在 清除 div 元 素 的 外 边 距 后 ，div 元 素 与 浏览 器 内 容 窗口 的 左边 框 、 上 边框 
和 右边 框 紧 紧 相连 。 此 时 可 以 在 div 样 式 中 添加 如 下 代码 ， 分 别 设置 div 元 素 的 左 外 边 距 为 
50px、 上 外 边 距 为 100px、 右 外 边 距 为 50px， 刷 新 页 面 后 ， 效 果 如 图 7.5 所 示 。 





















































margin:100px 50px Opx 50px; 
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图 7.5 











还 有 一 种 情况 ， 当 上 下 外 边 距 一 样 ， 左 右 外 边 距 也 一 样 时 ， 还 可 以 使 用 缩放 的 方式 来 设 
置 外 边 距 属性 。 例 如 ， 上 下 外 边 距 都 是 10px， 左 右 外 边 距 都 是 15px 时 ， 可 以 使 用 以 下 代码 进 
行 设置 。 
































margin:10px 15px; 

2. 边框 

边框 是 内 容 与 填充 的 边界 ， 只 有 设置 了 边框 样式 才能 正确 显示 。 在 第 6 章 中 介绍 表格 和 
边框 时 我 们 已 经 介绍 了 边框 的 样式 border-style， 这 些 边框 样式 同样 适用 于 盒子 模型 。 

在 CSS 中 可 以 使 用 border-width 属 性 统一 设置 4 条 边框 的 宽度 ， 还 可 以 使 用 以 下 4 个 属性 分 
别 对 这 4 条 边框 进行 设置 。 


@ border-top-width: 设置 上 边框 的 宽度 。 
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@ border-right-width: 设置 右边 框 的 宽度 。 
@ border-bottom-width: 设置 下 边框 的 宽度 。 
@ border-left-width: 设置 左边 框 的 宽度 。 


边框 宽度 的 取 值 有 3 个 ，thin 表 示 细 的 边框 ，medium 表 示 默 认 的 中 等 边框 ，thick 表 示 粗 的 














边框 ， 效 果 如 图 7.6 所 示 。 








€ 3 @G filey//Campp/htdocs/7/7.3.html 
于 dreamwemver cc 2.. DS HTML 


his 运往 效 更 





iuz 边 本 区 内 








图 7.6 




















边框 的 另外 一 个 属性 是 border-color， 用 于 设置 边框 的 颜色 。 可 以 统一 为 4 条 边框 设置 颜 
也 可 以 使 用 以 下 4 个 属性 分 别 为 它们 设置 颜色 。 


























border-top-color: 设置 上 边框 的 颜色 。 
border-right-color: 设置 右边 框 的 颜色 。 
border-bottom-color: 设置 下 边框 的 颜色 。 


四 
. 
四 
@ ”border-left-color: 设置 左边 框 的 颜色 。 























例如 下 面 这 段 代 码 ， 分 别 为 不 同 的 边框 设置 不 同 的 颜色 ， 效 果 如 图 7.7 所 示 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>7.3</title> 
<style type="text/css"> 
2 

margin:0; 

上 

divt 

border:solid 10px #2819E8; 
margin:10px; 
border-top-color:red; 
border-right-color:blue; 
border-bottom-color:green; 
border-left-color:yellow; 
» 

</style> 

</head> 

<body> 

<div> 边 框 颜 色 效 果 </div> 
</body> 

</html> 
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DD dreamweaver cc 2... HTML 








图 7.7 


























[ad 
下 


和 





角 边 框 ， 例 如 下 面 这 段 代 码 ， 设 置 边框 的 左上 











En 
































还 可 以 使 用 border-radius 属 性 设置 
























































圆 角 半 径 为 20px， 左 下 圆 角 和 右 下 圆 角 半径 为 3px， 效 果 如 图 7.8 所 示 。 
<!doctype html> 

<html> 

<head> 


<meta charset="utf-8"> 
<title>7.3</title> 

<style type="text/css"> 
at 

margin:0; 

了 

divt{ 

border:solid 2px #2819E8; 
margin:10px; 
font-size:36px; 
border-radius:20px 20px 5px S5px; 
: 

</style> 

</head> 

<body> 
<div> 圆 角 边框 效果 </div> 
</body> 

</html> 


73 x We 


所 CG D file///C:/xampp/htdocs/7/7.3.html 
dreamweaver cc 2... OO HTML 





俩 角 边框 效果 











图 7.8 





























| 
成 





CSS 中 还 提供 了 以 下 4 种 属性 分 别 用 于 设置 4 条 边框 的 圆 角 ; 


border-top-left-radius: 设置 左上 圆 角 半径 。 
border-top-right-radius: 设置 右上 圆 角 半径 。 
border-bottom-left-radius: 设置 左下 圆 角 半径 。 
border-bottom-right-radius: 设置 右 下 圆 角 半径 。 
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3. 内 边 距 

内 边 距 用 于 设置 填充 内 容 与 边框 之 间 的 
padding 统 一 设置 ， 也 可 以 分 别 使 
设置 内 边 距 。 例 如 下 面 
边 距 ， 效 果 如 图 7.9 所 示 。 

<!doctype html> 

<html> 

<head> 






































区 域 。 


与 外 边 距 相同 ，4 条 内 边 距 可 以 使 
padding-top、padding-bottom、padding-left 和 padding-rig 














= 
总 












































<meta charset="utf-8"> 
<title>7.3</title> 
<style type="text/css"> 
margin:0; 

二 

divt{ 

border:solid 2px #2819E8; 
margin:10px; 

3} 

#paddingstyle{ 
padding-top: 5px; 
padding-bottom:10px; 
padding-left:20px; 
padding-right:30px; 

: 

</style> 

</head> 

<body> 
<div> 无 内 边 距 效果 </div> 
<div id="paddingSstyle"> 有 内 
</body> 

</html> 


< Q 
洪 应 用 [ 


fil 


这 段 代码 ， 第 1 个 div 元 素 没 有 设置 内 边 距 ， 而 第 2 个 div 元 素 设置 了 大 


边 距 效 果 </div> 


le:///C:/xampp/htdocs/7/7.3.html 


dreamweaver cc 2.. HTML 

















EE 束 








| 本 了 





4. 内 容 
































容 是 盒子 模型 中 实 实在 在 需要 展示 的 东西 ， 位 于 盒子 模型 的 中 心 ， 可 以 根据 不 同 的 内 














容 使 














不 同 的 CSS 样 式 进行 设置 。 妇 








0 果 内 容 是 文字 ， 就 可 以 使 





设置 














; 如 果 内 容 是 图 像 ， 就 可 以 使 














图 像 相关 的 样式 进行 设置 。 




















文本 和 段落 相关 的 样式 进行 
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7.1.3 元 素 的 定位 
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在 CSS 中 使 用 position 属 性 可 以 设置 元 素 在 页 面 中 的 位 置 ， 即 元 素 的 定位 。position 属 性 有 











4 种 取 值 ， 分 别 介绍 如 下 。 











(1) static: 默认 定位 方式 ， 也 称 为 文档 流 布局 。 

















(2) relative: 相对 定位 。 以 元 素 原来 所 在 位 置 为 基点 ， 








重新 定位 元 素 的 位 置 。 




















(3) absolute: 绝对 定位 。 彻 


且 不 依赖 任何 对 象 。 








底 清 除 元 素 原来 所 在 位 置 ， 宇 














(4) fixed: 将 元 素 相对 

















于 窗口 固定 位 置 。 











新 为 元 素 设置 新 的 位 置 ， 并 





我 们 先 来 看 一 个 相对 定位 的 例子 。 页 面 中 有 3 个 div 元 素 ， 第 1 个 div 元 素 不 设置 定位 的 样 


式 ; 第 2 个 div 元 素 设 置 相 对 定位 ， 六 





left 属 性 设置 为 50px。 代 码 如 下 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8 
<title>7.4</title> 
<style type="text/cs 
divt{ 

border:solid 2px #28 
margin:10px; 
background-color:#72 
color:white; 

#posA{ 
position:relative; 
left:-50px; 

是 

#posB{ 
position:relative; 
left:50px; 

lL 

</style> 

</head> 

<body> 
<qiv> 原 来 的 位 置 </div> 


> 


Ce 


19E8; 


1E20; 


<div id="posA"> 新 的 位 置 A</div> 
<div id="posB"> 新 的 位 置 B</div> 


</body> 
</html> 


运行 这 段 代码 后 ， 可 以 看 到 第 2 个 div 元 素 已 经 向 左 移动 到 浏览 器 窗 
的 外 边 。 同 样 是 设置 left 属 性 ， 





div 元 素 向 右 移动 到 浏览 器 窗 
个 取 值 为 负数 ， 一 个 取 值 为 了 




















E 数 ， 效 果 如 








设置 left 属 性 为 -530px;， 第 3 个 div 元 素 也 设置 相对 定位 ， 











的 外 边 ， 而 第 3 个 








图 7.10 所 示 。 





上 现 两 种 不 





同 效果 的 原因 是 一 
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© BD file///C/xampp/htdocs/7/7.4.html 


襄 dreamweaver cc 2.. HTML 





修改 第 2 个 div 和 第 3 个 div 的 样式 ， 让 两 个 div 以 绝对 定位 的 方 寺 
所 示 : 


#posA{ 
position:absolute; 
left:50px; 
top:70px; 

3 

#posB{ 
position:absolute; 
left:200px; 
top:70px; 

了 











刷新 页 




















后 的 效果 如 图 


7.11 所 示 。 











#posA{ 
position:absolute; 
left:50px; 
top:70px; 
height:400px; 
L 

#posB{ 
position:fixed; 
left:200px; 
top:70px; 

} 





运行 这 段 代码 后 ， 当 滚动 鼠标 时 ， 第 3 个 div 的 位 置 始终 保持 固 


7 


C 





图 7.10 











eVWCYVxamppyhtdocs717.4.html 


开关 [dreamweaver cc， 加 TML 


重新 设置 第 2 个 div 的 高 度 ， 使 浏 
fixed， 相 关 代码 如 下 : 


























新 设置 位 置 ， 代 码 如 下 


bt 现 上 下 滚动 条 ， 然 后 设置 第 3 个 div 的 position 为 

















定 不 变 ， 而 前 两 个 div 的 位 
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置 会 随 着 鼠标 的 滚动 而 移动 ， 如 图 7.12 所 示 。 





74 < 
€ 3 G fle//cmampp/htdocs/7/7 Ahtml 


ED bermeomer 2 CI HT 





图 7.12 


7.1.4 给 图 片 签名 


如 果 你 的 想象 力 够 丰富 ， 就 可 以 使 用 CSS 创 建 各 种 有 趣 的 页 面 效 果 ， 例 如 给 图 片 签名 。 
下 面 我 们 来 分 析 一 下 实现 这 个 效果 的 关键 步骤 。 
首先 可 以 确定 一 点 ， 文 本 必须 和 图 片 显示 在 同一 个 位 置 上 。 这 就 好 比 两 个 图 层 芭 加 在 一 
起 ， 下 层 是 图 片 ， 上 层 是 文字 签名 。 要 实现 这 种 效果 ， 可 以 将 图 片 和 文本 分 别 放 在 两 个 div 元 
素 中 ， 然 后 通过 设置 div 元 素 的 float 属 性 使 文本 浮动 到 图 片上 。 
其 次 ， 要 控制 文字 在 图 片上 显示 的 位 置 。 要 对 文字 进行 定位 处 理 ， 这 就 需要 用 到 CSS 的 
position 属 性 。 
最 后 ， 我 们 要 让 签名 显示 的 更 好 看 一 些 ， 就 需要 设置 文本 的 颜色 、 大 小 、 样 式 和 字体 等 。 
通过 以 上 的 分 析 ， 有 了 以 下 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>7.5</title> 
<style type="text/css"> 
#img{ 

float:left; 

上 

#txt{ 

color:red; 
position:absolute; 
left:220px; 

top:210px; 
font-size:64px; 
font-weight:bold; 
font-family: "华文 行 楷 "; 
font-style:oblique; 

和 

</style> 

</head> 

<body> 

<div id="img"><img src="img/img02.jpg" /></div> 
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<div id="txt"> 注 </div> 
</body> 
</html> 


运行 这 段 代 码 后 ， 效 果 如 





























怒 DIV+CSS 网 页 布局 方法 
































7.2.1 div 的 并 列 与 谋 套 结构 


下 所 示 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>7.6</title> 
<style type="text/css"> 
| 

margin:0; 

padding:0; 





在 分 析 网 页 结构 的 时 候 ， 我 们 可 以 将 网 页 中 
如 一 般 的 网 页 都 会 有 头 、 内 容 和 底部 ， 我 们 可 以 








的 各 个 


个 容器 ， 容 器 中 可 以 放 文字 、 





DIV+CSS 是 目前 主流 的 网 页 布局 方法 。 可 以 将 div 看 成 是 一 
图 像 、 表 格 等 其 他 元 素 ， 通 过 CSS 的 控制 就 能 实现 各 种 网 页 效果 。 


区 域 划分 为 一 个 一 个 的 div 容 器 。 比 














区 域 ， 代 码 如 

















3 个 div 元 素 分 别 表示 这 3 个 
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局 | 





站 

divt{ 

border:solid lpx #B06317; 
text-align:center; 
font-weight:bold; 

#header{ 

height:10%; 

min-height:100px; 
background-color:#C9E5C4; 

六 

#content{ 

height:80%; 

min-height:400px; 
background-color:#D5C582; 

下 

#foot{ 

height:10%; 

min-height:100px; 
background-color:#8FA3E3; 

3} 

</style> 

</head> 

<body> 

<div id="header"> 网 页 的 头 部 </div> 
<div id="content"> 网 页 的 内 容 </div> 
<div id="foot"> 网 页 的 底部 </div> 
</body> 

</html> 














图 7.14 











在 这 段 代码 中 ， 依 次 排列 了 3 个 div 元 素 。 我 们 设置 第 1 个 和 第 3 个 div 元 素 的 高 度 为 10%， 
最 小 高 度 为 100px， 第 2 个 div 元 素 的 高 度 为 80%， 最 小 高 度 为 400px。 运 行 这 段 代码 后 ， 效 果 
如 图 7.14 所 示 。 
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有 时 候 我 们 不 仅 要 纵向 排列 div 元 素 ， 还 需要 横向 排列 div 元 素 。 由 了 
素 ， 每 个 div 元 素 都 单独 占据 一 行 ， 为 了 达到 横向 排列 div 元 素 的 














Fdiv 元 素 是 块 级 元 


























来 控制 div 的 排列 方向 。 例 如 下 面 这 段 代码 : 


<!doctype htm1> 
<html> 

<head> 

<meta charset="utf 
<title>7.7</title> 
<style type="text/ 
margin:0; 
padding:0; 

} 

divt{ 

border:solid lpx # 
text-align:center; 
font-weight:bold; 
float:left; 
min-height:400px; 
#1left{ 

width:10%; 
min-width:100px; 
background-color: 
#centert{ 
width:70%; 
min-width:300px; 
background-color: 
. 

#right{ 
width:10%; 
min-width:100px; 
background-color: 
3 

</style> 

</head> 

<body> 

















_8"> 


他 SS > 


B06317; 


C9E5C47 


D5C582; 


8FA3E3; 


<div id="left"> 左 边 的 区 域 </div> 
<div id="center"> 中 间 的 区 域 </div> 
<div id="right"> 右 边 的 区 域 </div> 


</body> 
</html> 


在 这 段 代 码 中 ， 仍 然 依次 排列 了 3 个 div 元 素 。 通 过 CSS 样 式 设置 第 1 个 和 第 3 个 div 元 素 的 

















宽 
选 
7.15 所 示 。 

















的 ， 


口 


度 为 10%， 最 小 宽度 为 100px， 第 2 个 div 元 素 的 宽度 为 70%， 最 小 宽度 为 300px。 然 后 在 div 
择 器 中 设置 div 元 素 的 Hoat 属 性 为 left， 让 3 个 div 元 素 向 左 浮动 。 运 和 


行 这 段 


以 通过 设置 float 属 性 











代码 后 ， 效 果 如 医 
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€ 3 GileVVCAampp/htdocs/7177html 


DD dreomeeever ce 2 OI HTML 








图 7.15 




















为 了 实现 某 些 特殊 的 效果 ， 我 们 经 常会 使 用 嵌 套 的 div 来 布局 HTML 页 面 ， 并 通过 CSS 设 
置 完成 这 些 特 殊 的 效果 。 例 如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>7.8</title> 
<style type="text/css"> 
a 

margin:0; 

padding:0; 

: 

#Containert{ 
height:500px; 
text-align:center; 
font-size:16px; 
font-weight:bold; 

3 

#1left{ 

float:left; 
height:500px; 
width:150px; 
margin-right:S5px; 
background-color:#DCD595; 
3 

#right{ 
margin-left:155px; 
#top{ 
background-color:#A6C6D8; 
margin-bottom: 5px; 
height:100px; 

上 

#bottom{ 
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height:395px; 
+" 
#contentLeft{ 
width:600px; 
float:left; 
height:395px; 
background-color:#93E77F; 
#contentRight{ 
margin-left:605px; 
height:395px; 
background-color:#C288DC; 
" 
</style> 
</head> 
<body> 
<div id="Container"> 
<div id="left"> 左 侧 栏 </div> 
<div id="right"> 
<div id="top"> 顶 部 栏 </div> 
<div id="bottom"> 
<div id="contentLeft"> 内 容 左 </div> 
<div id="contentRight"> 内 容 右 </div> 
</div> 
</div> 
</div> 
</body> 
</html> 


在 这 段 代 码 中 ， 最 外 层 的 div 元 素 作为 最 大 的 容器 ， 内 嵌 了 两 个 div 元 素 ， 这 两 个 div 元 素 
将 设置 为 左右 排列 ， 右 侧 的 div 元 素 中 又 内 嵌 了 两 个 div 元 素 ， 这 两 个 div 元 素 将 设置 为 上 下 排 
列 ， 下 面 的 这 个 div 元 素 中 又 内 和 戏 了 两 个 div 元 素 ， 这 两 个 div 元 素 又 会 设置 成 左右 排列 。 这 些 
div 元 素 经 过 一 层 一 层 的 嵌 套 ， 最 终 通 过 CSS 样 式 设置 为 如 图 7.16 所 示 效 果 。 

































































© 9 fley//C/ampp/htdocs/7/7.8.html 
ED dreamweever ee2.. CI MIML 





图 7.16 
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在 使 用 divtcss 布 局 页 面 的 时 候 ， 为 div 元 素 设置 固定 的 高 度 ， 是 布局 过 程 中 经 常会 使 用 的 
一 种 方法 。 使 用 固定 高 度 布局 页 面 时 ， 需 要 准确 计算 每 个 div 的 高 度 。 如 果 为 div 元 素 设置 了 
边框 、 内 边 距 或 外 边 距 ， 此 时 仍 需要 将 这 些 宽度 计算 在 相应 的 高 度 中 ， 否 则 整个 页 面 中 的 div 





























元 素 将 会 在 水 平方 向 上 相差 几 个 像素 。 如 图 7.16 所 示 ， 如 果 给 枚 eft 选 择 器 和 #contentLeft 选 择 





器 添加 以 下 代码 : 


border:solid lpx #DC2E74; 





在 不 修改 高 





因 











2px。 





度 的 情况 下 ， 页 
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rammsaer or 2-. I HTML 




















底部 就 会 上 


























度 也 相 


























上 现 几 个 像素 的 差距 ， 效 果 如 图 7.17 所 示 。 这 是 
为 设置 div 边 框 宽度 为 ]px 后 ， 在 垂直 方向 上 项 部 栏 和 内 容 左 分 别 新 增加 了 2px 的 边框 高 度 
所 以 贞 ight 选 择 器 的 高 度 与 雪 eft 选 择 器 的 高 度 就 相差 了 4px， 而 内 容 左 与 内 容 右 的 高 


差 


图 7.17 

7.2.3 自 适 应 高 度 布局 
固定 高 度 布局 常用 于 页 面 中 内 容 比 较 固定 的 区 域 ， 如 页 面 项 部 的 logo 区 域 以 及 页 面 底部 
的 友情 链接 这 些 区 域 。 在 内 容 区 域 中 ， 往 往 不 建议 使 用 固定 高 度 布局 ， 这 是 因为 这 些 区 域 的 











<!doctype 
<html> 
<head> 








html> 

















<meta charset="utf-8"> 
<title>7.10</title> 
<style type="text/css"> 
#Containert{ 
height:300px; 


内 容 根据 实际 情况 可 能 有 变化 ， 如 果 内 容 的 高 度 超 H 
期 望 的 效果 。 例 如 下 面 这 








H 了 div 元 素 设 置 的 高 度 ， 就 无 法 实 














现 我 们 
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background-color:#c89899; 

#dataRow{ 

height:100px; 

background-color:#8BBDB2; 

下 

</style> 

</head> 

<body> 

<div id="Container"> 

<div id="dataRow"> 
数据 行 <pr> 
数据 行 <pr> 
数据 行 <br> 
数据 行 <br> 
数据 行 <br> 
数据 行 <br> 
数据 行 <br> 
数据 行 <br> 
数据 行 <br> 
</div> 

</div> 

</body> 

</html> 


在 这 段 代码 中 ， 设 置 外 层 div 元 素 的 高 度 为 300px， 内 层 div 元 素 的 高 度 为 100px。 分 别 为 
页 个 0 天 天 设 可 不 同 的 表 景 ， 当 内 层 div 元 素 中 的 内 容 行 太 多 时 ， 超 出 部 分 内 容 的 背景 色 将 
会 显示 为 外 层 div 元 素 的 背景 色 ， 这 并 不 是 我 们 希望 看 到 的 ， 如 图 7.18 所 示 。 























€ 3 © Dfie//C/ampp/htdocs/7/7.10.html 
洲 2 Ti deomwenver ee 2 口 HIML 





图 7.18 

















为 了 避免 这 种 情况 的 出 现 ， 我 们 需要 使 用 自 适应 高 度 布局 的 方式 进行 修改 。 修 改 方法 很 
简单 ， 只 需要 将 # dataRow 选 择 器 中 的 height 属 性 用 min-height 属 性 替换 即 可 。 刷 新 页 面 后 ， 我 
们 可 以 看 到 一 个 自 适应 高 度 布局 的 效果 ， 如 图 7.19 所 示 。 
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€ 3 G Dfie///c/xampp/htdocs/7/7.10html 
如 应 用 [9] dreemweaver cc 2-。 品 HTML 





7.2.4 多 行 多 列 布局 








使 用 div+css 还 可 以 设置 多 行 多 列 的 页 面 
面 等 。 在 创建 多 行 多 列 布局 之 前 ， 首 先 要 规划 页 面 结构 ， 确 定 要 创建 几 行 几 列 的 页 面 布 



























































图 7.19 














这 样 才 能 够 确定 设计 使 用 多 少 个 div 元 素 。 售 


<!doctype html> 


<html> 
<head> 








<meta charset="utf-8"> 


<title>7. 


11</title> 


<style type="text/css"> 
#Containert{ 

height:310px; 

float:left; 
background-color:#c89899; 


站 
#dataf 


height:100px; 
width:100px; 

float:left; 
margin-right:5px; 
margin-bottom: 5px; 
background-color:#8BBDB2; 


站 
</style> 
</head> 
<body> 


<div id="Container"> 


<div 
<div 
<div 
<div 
<div 


id="data"> 数 据 </div> 
id="data"> 数 据 </div> 
id="data"> 数 据 </div> 
id="data"> 数 据 </div> 
id="data"> 数 据 </div> 


如 下 




















布局 ， 常 见 的 案例 有 商品 浏览 页 面 、 


这 段 代码 : 


图 像 浏览 页 





























局 ， 
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<div id="datan> 数 据 </div> 
<div ig="data"> 数 据 </div> 
<div id="datan> 数 据 </div> 

</div> 

</body> 

</html> 


在 这 段 代码 中 ， 总 共有 8 个 div 元 素 用 于 演示 多 行 多 列 布局 的 效果 。 使 用 CSS 设 置 外 层 容 
器 向 左 浮动 ， 然 后 设置 内 嵌 div 元 素 也 向 左 浮动 ， 为 它们 设置 不 同 的 背景 色 、 高 度 和 宽度 ， 效 
果 如 图 7.20 所 示 。 如 果 改变 浏览 器 窗口 的 大 小 ， 这 些 div 元 素 也 会 自动 适应 浏览 器 窗口 大 小 ， 
从 而 改变 它们 的 排列 方式 ， 效 果 如 图 7.21 所 示 。 
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图 7.20 





天 3 页 面 布局 设计 


< a 






































页 面 布局 是 网 页 设计 中 非常 重要 的 一 个 环境 。 早 期 大 量 的 页 面 布 局 都 使 用 table 布 局 ， 随 
着 技术 的 发 展 ， 目 前 已 经 很 少 有 人 用 table 布 局 页 面 了 ， 取 而 代 之 的 是 div+css 布 局 。 本 节 将 制 
作 一 个 固定 宽度 的 页 面 布局 效果 ， 帮 助 大 家 掌握 div+css 的 布局 方法 。 详 细 制 作 步 骤 如 下 ; 


加 新 建 一 个 HTML 文 件 ， 在 代码 视图 中 编写 一 个 div 元 素 ， 设 置 id 属性 为 container， 然 后 
使 用 通配符 * 清 除 所 有 元 素 内 外 边 距 ， 使 用 id 选择 器 设置 这 个 div 居 中 显示 ， 宽 度 为 900 像 素 。 
相关 代码 如 下 所 示 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
<style> 

Sh 

margin: 0; 

padding: 0 
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， 

#container { 
margin: 0 auto7 
width: 900pxzx; 

} 

</style> 
</head> 

<body> 

<div id="container"> 
</div> 

</body> 

</html> 


因为 没有 给 这 个 div 设 置 任何 高 度 和 边框 宽度 ， 也 没有 在 这 个 div 内 编写 任何 内 容 ， 所 以 
这 段 代 码 在 浏览 器 中 没有 任何 效果 。 这 里 设置 div 的 margin 属 性 ， 仅 仅 是 为 了 让 这 个 div 容 器 以 
及 它 里 面 的 内 容 能 够 在 水 平方 向 上 居中 显示 ， 这 样 当 用 户 改变 浏览 器 窗口 大 小 的 时 候 ， 能 够 
保证 页 面 居中 显示 。 


加 在 步骤 团 创 建 的 div 内 再 嵌 套 4 个 div， 分 别 用 于 显示 页 面 的 头 部 、 菜 单 、 内 容 和 底 
部 ， 其 中 内 容 div 中 再 谨 套 两 个 div， 分 别 用 于 显示 侧 边栏 和 内 容 区 域 。 相 关 代 码 如 下 所 示 ; 





































































































<body> 
<div id="container"> 
<div id="header"> 这 里 是 页 面 头 部 ， 用 于 显示 网 站 的 1ogo 和 网 站 名 称 </div> 
<div id="menu"> 这 里 是 菜单 栏 ， 用 于 显示 页 面 导航 </div> 
<div id="mainContent"> 
<div iqd="sidebar"> 这 里 是 侧 边栏 ， 用 于 显示 页 面 导 航 或 者 其 他 信息 </div> 
<div id="content"> 这 里 是 页 面 内 容 区 域 </div> 
</div> 
<div id="footer"> 这 里 是 页 面 底部 ， 可 用 于 显示 页 面 导航 、 友 情 链接 和 版 权 等 信息 </div> 
</div> 
</body> 


这 段 代码 在 浏览 器 中 的 显示 效果 如 图 7.22 所 示 。 




















浊 污 月 十 显 丰 页 而 时 际 或 者 其 他 信和 
这 里 是 页 面 内容 区 | 
这 里 是 页 面 扩 部， 可 用 二 显示 页 寺 导航 、 支 情 幸 阁 和 具 竺 信息 








图 7.22 











园 设 置 页 面 顶部 样式 ， 高 度 为 100 像 素 ， 底 部 外 边 距 为 5 个 像素 ， 并 设置 背景 色相 关 
代码 如 下 所 示 : 


#header { 

height: 100px; 
background: #C8D9D7; 
margin-bottom: Spx; 

. 
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刷新 页 面 后 ， 效 果 如 图 














20 


7.23 所 示 。 


ile//C rampp/htdocs/7/7.12 html 





ED) doomeesrer 2. I HT 
| 志 覃 是 页 面 夭 名， 用 于 昌 示 网 站 的 1czs 和 网 站 名称 


这 时 时 这 间作， 
人 


用 于 县 示 丰 而 寻 院 
用 于 县 示 页 面 导 辽 或 者 其 他 信息 


而 内 容 区 二 
i 








图 7.23 











四 设置 菜单 样式 ， 菜 单 高 度 为 30 像 素 ， 底 部 外 边 距 为 5 个 像素 ， 并 设置 背景 颜色 ， 相 关 


代码 如 下 : 


#menu { 

height: 30px; 
background:#C6ABAC; 
margin-bottom: Spx; 
: 








刷新 页 
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7.24 所 示 。 


file///E ampp/htdiocs/7/7.12 html 


EN Drown 2. CI HIM 
这 里 是 机 而 头 部 ， 用 于 明示 网 站 的 less 和 网 站 名称 


这 时 是 侧 这 相 
这 时 入 耐用 答 域 
这 时 是 责 面 床 竺 ， 可 用 于 旺 示 页面 能 、 友 情 屋 接生 权 等 信息 


用 于 旺 示 页 面 时 统 或 者 其 地 信息 





图 7.24 


接 下 来 设置 内 容 区 域 的 样式 ， 首 先 设置 内 容 区 域外 边 id 属性 为 mainContent 的 样式 ， 





设置 高 度 为 500 像 素 ， 底 部 外 边 距 为 5 个 像素 ， 再 设置 侧 边 栏 的 样式 ， 设 置 侧 边栏 向 右 浮动 ， 
宽度 为 200 像 素 ， 高 度 为 500 像 素 ， 并 设置 背景 色 ; 最 后 设置 内 容 区 域 的 样式 ， 设 置 内 容 区 域 
向 左 浮动 ， 宽 度 为 695 像 素 ， 高 度 为 500 像 素 ， 并 设置 背景 色 。 相 关 代码 如 下 所 示 : 


#mainContent { 
height: 500px; 
margin-bottom: Spx; 
} 

#sidebar { 

float: right; 
width: 200px; 
height: 500px; 
background:#99E6B5; 
， 

#content { 

float: left; 

width: 695px; 
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height: 500px; 
background:#E19EE37 


需要 注意 的 是 ， 在 步骤 加 中 我 们 设置 了 页 面 宽度 为 900 像 素 ， 侧 边栏 的 宽度 为 200 像 素 ， 
那么 内 容 区 域 的 宽度 应 该 是 700 像 素 。 由 于 页 面 的 顶部 和 菜单 都 设置 了 底部 外 边 距 为 5 个 像 


素 ， 所 以 这 里 为 了 保持 页 面 整体 效果 ， 让 内 容 区 域 的 宽度 缩小 了 5 个 像素 。 刷 新 页 面 后 的 效 
果 如 图 7.25 所 示 。 







































































Ehret en 











图 7.25 











四 O 最 后 设置 底部 的 样式 ， 设 置 底部 高 度 为 60 个 像素 ， 并 设置 背景 色 ， 相 关 代 码 如 下 所 示 : 
#footer { 

height: 60px; 

background:#5F725E; 


刷新 页 面 后 的 最 终 效果 如 图 7.26 所 示 。 














图 7.26 


加 通过 本 节 的 介绍 ， 有 兴趣 的 同学 还 可 以 尝试 制作 更 多 的 页 面 布局 效果 。 
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导航 菜单 是 网 站 中 非常 重要 的 内 容 ， 它 是 整个 网 站 的 地 图 。 网 站 中 主要 的 界面 都 应 该 
设置 导航 菜单 ， 导 航 菜单 中 不 需要 包含 网 站 所 有 页 面 的 目录 ， 但 必须 包括 网 站 主要 内 容 页 




























































































团 









































8.1 网 站 导航 菜单 概述 














网 站 导航 菜单 是 网 页 设计 中 十 分 重要 的 部 分 ， 它 为 用 户 提供 了 浏览 整个 网 页 的 快速 通 
道 。 下 面 我 们 将 简单 介绍 网 站 导航 菜单 的 作用 以 及 制作 标准 。 


8.1.1 网 站 导航 菜单 的 作用 


网 站 导航 的 目的 就 是 帮助 用 户 找到 他 们 需要 的 信息 ， 可 以 概括 为 以 下 几 点 : 


(1) 引导 用 户 完 成 网 站 各 内 容 页 面 的 跳 转 。 这 个 功能 是 最 常见 的 ， 全 局 导航 、 局 部 导 
航 和 辅助 导航 等 都 是 为 了 引导 用 户 浏览 相关 的 页 面 。 

(2) 整理 网 站 中 各 页 面 之 间 的 关系 。 为 网 站 中 的 内 容 建立 一 个 索引 ， 这 个 最 常见 的 应 
就 是 网 站 地 图 和 内 容 索 引 表 ， 展 现 了 整个 网 站 的 目录 信息 ， 帮 助 用 户 快速 找到 相应 的 内 容 。 

(3) 定位 用 户 在 网 站 中 的 位 置 。 这 个 在 面包 忆 导 航 中 得 到 了 充分 的 体现 ， 它 帮助 用 户 
识别 当前 浏览 的 页 面 与 网 站 整体 内 容 关 系 ， 以 及 与 网 站 中 其 他 内 容 的 联系 和 区 分 。 


8.1.2 网 站 导航 菜单 的 制作 标准 


网 站 导航 菜单 是 网 站 中 每 个 网 页 的 重要 内 容 ， 导 航 菜单 中 主要 包含 了 网 站 的 主页 、 主 
要 功能 、 联 系 方式 等 一 些 用 户 感 兴趣 的 内 容 ， 这 些 内 容 应 该 与 网 站 结构 图 中 的 主要 目标 相关 
其 。 在 制作 网 站 导航 时 应 注意 以 下 几 点 : 

(1) 主页 上 的 导航 菜单 一 定 要 清晰 ， 醒 目 。 主 页 中 的 导航 是 用 户 浏览 网 站 的 第 一 个 入 
， 一 般 设计 为 一 级 目录 。 通 过 主页 中 的 导航 用 户 和 蜘蛛 都 可 以 深入 访问 到 网 站 所 有 重要 内 
容 ， 主 页 上 的 导航 栏目 通常 采用 文本 链接 。 














































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































第 8 章 制作 网 站 导航 菜单 
(2) 网 站 导航 菜单 文本 做 链接 。 虽 然 图 片 和 文本 都 可 以 用 来 实现 导航 菜单 ， 但 是 
文本 会 更 好 些 。 很 多 网 站 上 的 导航 菜单 都 使 用 图 片 或 flash 按 钮 做 链接 ， 这 样 虽然 可 以 让 
站 看 起 来 更 漂亮 和 美观 ， 但 是 并 不 利于 网 站 的 推广 ， 搜 索引 擎 很 难 搜索 到 这 类 网 站 ， 所 以 
站 导航 一 定 文本 做 链接 。 
(3) 创建 面包 屑 导航 。 面 包 屑 导航 可 以 让 用 户 了 解 当 前 所 处 位 置 ， 以 及 当前 页 面 在 这 
个 网 站 中 的 位 置 ， 体 现 了 网 站 的 架构 层级 ， 能 够 帮助 用 户 快速 学 习 和 了 解 网 站 内 容 和 组 织 方 
式 ， 从 而 形成 很 好 的 位 置 感 。 面 包 屑 导航 还 可 以 提供 返回 各 个 层级 的 快速 入 口 ， 方 便 用 户 操作 。 
(4) 重要 内 容 应 该 出 现在 首页 。 除 了 主 栏目 ， 还 应 该 将 次 级 目录 中 的 重要 内 容 以 链接 
的 方式 在 首页 或 其 他 子 页 中 多 次 呈现 ， 以 突出 这 些 内 容 为 重点 。 搜 索引 擎 会 对 这 种 一 站 内 多 
次 出 现 的 链接 给 予 充分 重视 ， 对 网 页 级 别提 高 有 很 大 帮助 ， 这 也 是 一 般 网 站 首页 的 网 页 级 别 
高 于 其 他 页 面 级 别 的 重要 因素 ， 因 为 每 个 子 页 都 对 首页 进行 了 链接 。 
py | 证 上 包月 二 
8.2 网 站 导航 菜单 的 种 类 
随 着 互联 网 技术 的 不 断 发 展 以 及 设计 者 个 性 化 的 充分 展现 ， 网 站 导航 的 设计 已 经 决定 了 
网 站 的 风格 。 根 据 目前 互联 网 上 出 现 的 各 类 导航 菜单 ， 可 以 将 其 分 为 以 下 6 种 类 型 。 
1. 三 维 导 航 设 计 
平面 的 导航 设计 越 来 越 显 得 平 良和 乏味 ， 更 多 的 设计 者 喜欢 用 三 维 立体 效果 来 展现 导航 
设计 ， 让 导航 看 起 来 更 有 立体 感 。 图 8.1 所 示 为 拥有 三 维 立体 效果 的 网 页 。 
G55 Ribbon = Em 
© Bjsitivy.com 三 





2. 说 话 气泡 导航 设计 


把 菜 这 


网 页 。 





设计 成 讲话 的 气泡 形式 ， 


¥ KINGPIN 


fsociaL 





























on human interaction and with your 
ningful social experience in your life 

















似乎 是 另 一 种 流行 的 趋势 。 图 8.2 为 拥有 说 话 气 泡 导 航 的 
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3. 圆 角 导航 设计 。 
到 角 经 常用 来 软化 规整 的 矩形 ， 按 钮 的 外 观 是 为 了 吸引 用 户 单 击 他 们 。 图 8.3 为 拥有 回 
导航 的 网 页 。 
- -En 
册 纯 css html5 国生 马 闲 二 x CE 
© | D wwwfreejs.net/demo/319/index html 立 三 | 
seRVCES | poRTFOUO | ABOUT | BloG cowTAcT 四 
图 8.3 
4. 应 用 图 标的 导航 设计 
因为 现在 带宽 不 再 令 人 担心 了 ， 所 以 越 来 越 多 的 精致 图 标 被 应 用 到 导航 设计 中 。 由 于 视 







































































觉 上 的 吸引 力 ， 使 用 图 标的 人 越 来 越 多 ， 这 种 趋势 仍 在 继续 。 图 标 不 仅 能 吸引 眼球 ， 还 有 助 


























到 























户 进 行 视觉 识别 。 














8.4 为 拥有 图 标 导航 的 网 页 。 





5. JavaScript 动 画 











JavaScript 技 术 使 Web 设 计 人 员 只 






































图 8.4 





几 行 代码 的 网 页 元 素 就 可 以 创建 动画 ， 设 计 师 们 最 近 
直 在 使 用 功能 多 用 又 美观 的 JavaScript。 图 8.5 为 导航 上 添加 了 动画 的 网 页 。 














-En 
全 动画 号 航 浴 意 css+js 动 匡 x 人 
= 3 CC Dwww.freejs.net/demo/280/index.html 空 | 站 中 
一 - = - 
加 
wwwfreejsneydemo/280/indexhtimis 5 ， 





6. 不 规则 形状 导航 设计 





图 8.5 


















































了 不 规则 形状 导航 的 网 页 。 





于 大 多 数 网 站 都 用 的 是 直 边 和 尖 角 ， 不 规则 的 形状 让 你 有 机 会 摆脱 俗套 。 图 8.6 为 使 
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Offering 5: 


让 半 - Expanding 
A ba Locally 
0 February 41th. 

















Gg 


8.3 创建 翻转 按钮 














翻转 按钮 是 一 种 用 来 制作 网 站 导航 菜单 的 素材 。 当 用 户 把 鼠标 停放 在 翻转 按钮 上 时 ， 按 


钮 会 呈现 一 个 翻转 的 对 














钮 又 会 恢复 到 原来 的 样式 。 本 节 将 介绍 几 种 创建 翻转 按钮 的 方法 。 


8.3.1 用 代码 创建 翻转 按钮 
CSS 中 的 transition 属 性 用 于 设置 CSS 在 一 定 的 时 间 区 间 内 平滑 过 渡 的 属性 值 ， 这 种 效果 















































可 以 在 鼠标 

















CSS 的 属性 值 。 它 的 语法 如 下 所 示 : 








transition: property duration timing-function delay; 


可 以 看 到 ，transition 是 一 个 简写 的 属性 ， 它 可 以 用 来 设置 4 个 过 渡 的 属性 ， 这 4 个 属性 的 


描述 分 别 如 下 。 
(1) transition-property: 规定 设置 过 渡 效 果 的 CSS 属 性 的 名 称 。 


(2) transition-duration: 规定 设置 过 渡 效 果 需 要 的 


(ms) 。 


























(3) transition-timing-function: 规定 速度 效果 的 速度 曲线 。 
(4) transition-delay: 定义 过 渡 效 果 何 时 开始 。 





例如 下 





日 














的 代码 : 


<!doctype html> 


<html> 
<head> 


<meta charset="utf-8"> 
<title>8.1</title> 
<style type="text/css"> 


作 ， 同 时 变换 成 另 一 种 样式 ， 当 用 户 把 鼠标 从 翻转 按钮 上 移 姑 


F 时 ， 按 





击 、 获 得 焦点 、 被 点 击 或 元 素 有 任何 改变 时 触发 ， 并 圆滑 地 以 动画 效果 改变 


寺 间 ， 单 位 可 以 是 秒 〈s) 或 者 毫秒 
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af 

padding:5px 20px; 
text-align:center; 
text-decoration:none; 
font:bold 25px Arial; 
color:white; 
background-color:#3e5706; 
transition:all 300ms ease; 
border-radius: 30px; 

, 

a:hover{ 

transform: rotateY (360deg); 
transition-delay:0.2s; 
color:#19667d; 
background-color:#70c9e3; 
1 

</style> 

</head> 

<body> 

<a href="#">button</a> 
</body> 

</html> 


在 这 段 代码 中 ， 页 面 只 有 一 个 超 链 接 标 签 ， 我 们 通过 CSS 将 其 设置 成 一 个 可 以 翻转 的 按 
钮 。CSS 中 只 有 两 个 选择 器 ， 在 a 选择 器 中 ， 首 先 设置 4 元 素 的 上 下 内 边 距 为 5 个 像素 ， 左 右 内 
边 距 为 20 个 像素 ， 取 消 超 链接 默认 的 下 划 线 设置 ， 定 义 超 链接 的 字体 和 大 小 ， 文 本 颜色 设置 
为 白色 ， 然 后 为 其 设置 一 个 背景 色 。 这 里 关键 的 一 段 代码 如 下 : 


transition:all 300ms ease; 


这 里 的 all 表 示 a 元 素 所 有 的 属性 ，300ms 表 示 300 毫 秒 ，ease 表 示 以 慢 速 开始 ， 然 后 变 快 ， 
最 后 以 慢 速 结束 的 过 渡 效 果 。 最 后 一 名 代码“border-radius: 30px” 表 示 超 链接 边框 的 圆 角 半 
径 为 30 个 像素 ， 至 此 就 设置 了 一 个 圆 角 按钮 的 效果 ， 效 果 如 图 8.7 所 示 。 

一 个 选择 器 a:hover 设 置 当 鼠标 悬 停 在 超 链接 上 时 超 链接 的 效果 。 首 先 使 用 transform 属 
性 设置 超 链接 沿 着 Y 轴 旋转 360 度 ， 然 后 再 使 用 transition-delay 属 性 设置 延 时 0.2 秒 ， 同 时 设置 
超 链接 文本 的 颜色 和 背景 色 。 刷 新 页 面 ， 当 鼠标 停留 在 按钮 上 时 ， 按 钮 会 先 翻 转 ， 然 后 变换 
为 另 一 种 样式 ， 效 果 如 图 8.8 所 示 。 
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8.3.2 在 Dreamweaver 中 制作 翻转 按钮 


翻转 按钮 效果 是 目前 使 用 比较 广泛 的 一 种 按钮 效果 ， 它 可 以 有 效 地 美化 网 页 。 除 了 以 上 
介绍 的 使 用 CSS 实 现 翻转 按钮 效果 外 ， 我 们 还 可 以 使 用 Dreamweaver 轻 松 制作 翻转 按钮 效果 ， 
具体 操作 步骤 如 下 : 


打开 Dreamweaver 软 件 ， 新 建 一 个 HTML 文件 。 
加 选择 “ 括 入 ”一 “图 像 ” 一 “鼠标 经 过 图 像 ”命令 ， 如 图 8.9 所 示 。 
ER 


下。 pvD) 
HTML5 Video(V) Ctrl+Alt+Shift+V 
(A) 
国有 "| Een Cl+Ak+1 
事 格 (D) Cerl+Akt+T 鼠标 经 过 图 像 (R) | 
Head(H) » Fireworks HTML(A) 
癌 本 (S) 

























































































8.9 











辆 打开 “插入 鼠标 经 过 图 像 ”对 话 框 ， 如 图 8.10 所 示 。 在 这 个 对 话 框 中 ， 设 置 “图 像 
名 称 ” 为 “button”， 单 击 “ 原 始 图 像 ” 后 面 的 “浏览 ”按钮 ， 打 开 “ 选 择 文件 ”对 话 框 ， 
选择 原始 的 按钮 图 像 ， 然 后 返回 “插入 鼠标 经 过 图 像 ”对 话 框 。 单 击 “ 鼠 标 经 过 图 像 ” 后 面 
的 “浏览 ”按钮 ， 设 置 鼠 标 经 过 时 要 显示 的 图 像 ， 设 置 蔡 换文 本 为 button; 设置 当 按 下 按钮 
时 ， 前 往 的 URL 为 #。 单 击 “ 确 定 ”按钮 后 ， 完 成 了 一 个 翻转 按钮 的 效果 。 


括 入 鼠标 经 过 图 像 | > 


图 入 名 各 :lbutton 
原子 图像 [int/ing01.Pne 测 
服 标 经 过 可 像 int/ ing02. png 再 
网 开业 生 村 经 过 本 多 
基 扫 文本 :button 


确定 
取 清 
导 助 
要 下 时 ,前往 的 URL 刚 MR. 


图 8.10 


四 经 过 以 上 操作 后 ， 在 Dreamweaver 的 代码 视图 中 ， 我 们 可 以 看 到 页 面 中 添加 了 很 多 代 
码 ， 包 括 JavaScript、HTML 元 素 和 属性 ， 完 整 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>8.2</title> 

<script type="text/javascript"> 

function MM swapImgRestore() { //v3.0 

Var i,x,a=document.MM sr; for(i=0;ag&i<a.lengthgg (x=a[i])&&x.oSrc;i++) 

STC=X ,OSrC» 

} 
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function MM preloadImages () { //v3.0 
var d=document; if(d.images){ if(!d.MM p) d.MM p=new Array(); 
var i,j=d.MM p.length,a=MM preloadImages.arguments; for(i=0; i<a. 
length; i++) 
if (a[il.indexof("#")!=0){ d.MM pl[j]=new Image; d.MM p[j++] 
src=a[i];}} 
站 
function MM findobj (n，d) { //v4.01 
Var pi,x; if(!d) d=document; if((p=n.indexof("?"))>0&&parent.frames . 
length) { 
d=parent .frames[n.substring (p+1)] .document; n=n.substring(0,p);} 
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d. 
forms[i] [n]; 
for (i=0; !x&&d.1layersg&i<d.layers.length;i++) x=MM findobj (n,d.layers[i]. 
document); 
if(!x && d.getElementById) x=d.getElementById(n); return x; 
1 
function MM swapImage() { //v3.0 
Var i,j=0,x,a=MM swapImage.arguments; document.MM sr=new Array; 
for (i=0;i<(a.length-2);i+=3) 
if ((x=MM findobj (a[i]))!=null) {document.MM sr[j++]=x; if(!x.oSrc) 
X.OSrc=x.src; x.src=a[i+2];} 
} 
</script> 
</head> 
<body onLoad="MM preloadImages ('img/img02.png')"> 
<a href="#" onMouseOut="MM swapImgRestore()" onMouseOver="MM_ 
swapImage('button','','img/img02.png',1)"><img src="img/img01.png" 
alt="button" width="104" height="33" id="button"></a> 
</body> 
</html> 


加 与 CSS 实 现 翻转 效果 相 比 ， 这 些 代码 显得 过 于 兄长 和 繁 开 ， 同 时 也 不 利于 维护 和 更 
新 ， 所 以 我 们 不 建议 这 样 操作 。 

四 刷新 浏览 器 ， 可 以 看 到 如 图 8.11 所 示 按 钮 图 像 ， 当 鼠标 移动 到 按钮 上 时 ， 可 以 看 到 如 
图 8.12 所 示 按 钮 图 像 。 


D82 








© [file///C:/xampp/htdocs/8/8.2.htm 安 © [file///C:/xampp/htdocs/8/8.2.htm 安 
应 用 门 dreamweaver cc 2.， 丫 HTML 误 应 让“ 门 dreamweaver cc 2. HTML 


filey//C:/xampp/htdocs/8/8.2.htmle 











图 8.11 图 8.12 
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8:4 用 CSS 创 建 导航 菜单 































































































如 今 ， 大 部 分 网 页 都 使 用 CSS 和 列表 创建 导航 菜单 ， 这 是 因为 较 之 JavaScript 和 图 片 的 多 
建 方式 ， 这 种 方式 创建 的 导航 菜单 节省 了 很 多 的 代码 ， 而 且 读 取 速 度 更 快 。 不 仅 如 此 ， 使 
CSS 来 设计 导航 菜单 并 不 会 限制 个 人 的 想法 ， 各 种 灵活 多 变 的 设计 方案 呈现 出 了 不 同 的 视觉 











效果 。 














8.4.1 创建 CSS 列 表 导 航 菜单 

















我 们 先 使 用 CSS 和 列表 创建 一 个 简单 的 导航 菜单 ， 详 细 操作 步骤 如 下 : 
新 建 一 个 HTML 文 件 ， 在 页 面 中 创建 一 个 列表 ， 每 一 个 列表 项 中 都 有 一 个 超 链接 ， 详 














<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 


<title>8.3</title> 
</head> 

<body> 

<ul class="nav"> 








<1i class="home"><a href="#">home</a></1i> 
<1i class="setting"><a href="#">setting</a></1i> 
<li class="about"><a href="#">about</a></1i> 


</ul> 
</body> 
</html> 








运行 这 段 代 码 后 ， 效 果 如 


人 











8.3 x 最 
© Dfile:///C/xampp/htdocs/8/8.3.htm 3 


下 应 用 门 dreamweaver cc2.、 口 HTML 


。 home 
。 Setting 
。 about 








图 8.13 











加 先 设 置 列表 的 宽度 和 高 度 ， 然 后 设置 内 边 距 和 边框 ， 最 后 设置 一 个 背景 图 像 ， 注 意 
这 里 使 用 的 背景 图 像 只 有 一 个 像素 宽度 ， 所 以 需要 使 用 repeat-x 属 性 指定 在 又 轴 上 重复 ， 相 关 


代码 如 下 : 
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-naV { 

width: 500px; 

height: 50px; 

padding: 5px 15px; 

background:url (img/bg.png) repeat-x; 
border: lpx solid #efefef; 

用 


刷新 页 











团 


后 ， 效 果 如 图 8.14 所 示 。 




















Sry 


© 3 CD fie///c/xampp/htdocs/s/8.3.html 


境 国 [Di dewmoeeer cc 2.. OD HTML 


hom 
。 serting 
about 








8.14 











国 设置 li 标签 的 样式 。 首 先 使 用 float 属 性 让 所 有 的 列表 项 向 左 浮动 ， 然 后 使 用 display 属 
性 让 其 显示 在 一 行 ， 最 后 设置 列表 项 的 尺寸 和 外 边 距 ， 相 关 代 码 如 下 : 


nav 1i { 

float: left; 

width: 125px; 
height: S50px; 
display: inline; 
margin-right:25px; 
3 


刷新 页 面 后， 效果 如 图 8.15 所 示 。 




















© CE file///C:/xampp/htdocs/8/8.3.html 
让 应 用 门 dreamweaver cc 2.。 口 HTML 


boms Setting about 





图 8.15 


加 设置 列表 项 中 的 超 链接 ， 使 用 display 属 性 将 超 链接 转换 成 块 元 素 ， 设 置 内 边 距 、 凑 
色 、 字 体 、 大 小 和 高 度 ， 并 取消 超 链接 文本 的 下 划 线 。 然 后 设置 当 鼠 标 停留 在 超 链 接 上 时 ， 
改变 超 链接 的 颜色 ,相关 代 码 如 下 : 


:nav li at 

display: block; 

padding: 15pX Opx Opx 50px; 
color: #000; 

font-size: 18px; 





152 





第 8 章 制作 网 站 导航 菜单 





font-family: arial7 
height: 35px; 
text-decoration: none; 
} 

.nav 1i a:hover { 
color: #c00; 

有 


刷新 页 面 后 ， 将 鼠标 停留 在 超 链接 上 ， 效 果 如 











人 | 




















8.16 所 示 。 


SI 





€ $C [Bfle///C/xampp/htdocs/8/8.3.html 
ER | demser ca 口 MTML 





图 8.16 











贺 在 上 一 步 操作 中 ， 我 们 已 经 使 用 padding 属 性 在 超 链接 左边 空 出 了 50 个 像素 的 位 置 ， 
下 面 用 background 属 性 为 菜单 添加 背景 图 像 ， 并 设置 no-repeat 属 性 ， 同 时 还 需要 为 鼠标 悬 停 设 
置 另 一 种 背景 图 像 ， 相 关 代码 如 下 ; 


li.home { 

background: url(img/home.png) no-repeat; 

} 

li.home:hover { 

background: url(img/home-2.png) no-repeat; 
li.about { 

background: url(img/key.png) no-repeat; 

; 

li.about:hover { 

background: url (img/key-2.png) no-repeat; 

} 

li.setting { 

background: url(img/settings.png) no-repeat; 
3 

li.setting:hover { 

background: url (img/settings-2.png) no-repeat; 
» 


刷新 页 面 后 ， 当 鼠标 悬 停 在 超 链 接 上 时 ， 背 景 图 像 也 会 发 

















8.17 所 示 。 
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8.4.2 创建 二 级 CSS 列 表 导 航 菜单 


为 了 让 导航 菜单 能 够 包含 更 多 的 页 面 检索 内 容 ， 通 常情 况 会 使 用 二 级 甚至 三 级 导航 菜 
单 。 使 用 二 级 导航 菜单 不 仅 可 以 满足 我 们 的 要 求 ， 而 且 还 符合 人 们 对 于 导航 菜单 的 习惯 操 
作 ， 如 果 使 用 三 级 菜单 ， 有 可 能 会 让 某 些 用 户 感觉 不 适应 ， 从 而 放弃 更 多 内 容 的 检索 。 
下 面 我 们 就 详细 介绍 如 何 使 用 CSS 列 表 创建 二 级 导航 菜单 ， 操 作 步 又 如 下 : 


新 建 一 个 HTML 页 面 ， 在 页 面 中 创建 两 个 列表 ， 并 将 一 个 列表 嵌 套 在 另 一 个 列表 中 ， 
详细 代码 如 下 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>8.4</title> 
</head> 
<body> 
<div id="nav"> 
<ul> 
<1i><a href="#"> 主 页 </a></1i> 
<1i><a href="#"> 解 决 方案 </a></1i> 
<1i><a href="#"> 服 务 </a> 
<ul> 
<1i><a href="#"> 咨 询 服 务 </a></1i> 
<1i><a href="#"> 管 理 服 务 </a></1i> 
<1i><a href="#"> 客 户 支 持 </a></1i> 
</ul> 
</1i> 
<1i><a href="#"> 产 品 </a> 
<ul> 
<1i><a href="#"> 互 联网 业务 </a></1i> 
<1i><a href="#"> 智 能 设备 </a></1i> 
<1i><a href="#"> 云 计算 </a></1i> 
</ul> 
</1i> 
<1i><a href="#"> 技 术 支 持 </a></1i> 
</ul> 
</div> 
</body> 
</html> 


运行 这 段 代码 后 ， 效 果 如 图 8.18 所 示 。 
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图 8.18 











加 下 面 我 们 依次 为 导航 菜单 添加 样式 。 首 先 清除 所 有 元 素 的 内 边 距 和 外 边 距 ， 然 后 为 
div 元 素 设置 样式 ， 设 置 其 宽度 为 800px， 高 度 为 50px，div 中 所 有 字体 为 粗 体 ， 字 号 为 26px， 
字体 为 arial。 这 里 还 会 用 到 使 用 CSS 控 制 元 素 居 中 的 常用 方法 ， 设 置 margin 左 右边 距 为 auto。 
相关 代码 如 下 : 


| 

margin: 0; 

padding: 0; 

#nav { 

width: 800px; 

height: 50px; 

font: bold 26px arial; 
margin: 0 auto; 

i 


刷新 页 面 后 ， 效 果 如 图 8.19 所 示 。 























图 8.19 


园 外 层 列表 作为 一 级 菜单 ， 首 先 需 要 清除 列表 符号 ， 然 后 让 这 些 列表 项 向 左 浮动 ， 这 
样 他 们 就 能 显示 在 一 行 ， 最 后 设置 一 级 菜单 的 position 属 性 为 relative， 这 是 为 调整 二 级 菜单 做 
的 准备 。 相 关 代码 如 下 : 


#nav ul 11 { 
list-style: none; 
float: left; 
position: relative; 
L 
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刷新 页 面 后 ， 效 果 如 图 8.20 所 示 。 
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图 8.20 











贺 下 面 设置 一 级 菜单 中 超 链 接 的 样式 。 首 先 设置 超 链 接 的 文本 颜色 为 白色 ， 然 后 添加 
一 个 背景 色 ， 去 除 超 链 接 默认 的 下 划 线 效果 ， 让 超 链接 中 的 文本 居中 显示 。 为 了 让 菜单 显示 
的 更 好 看 些 ， 设 置 超 链接 内 边 距 为 20px， 给 文本 和 边框 留 一 定 的 距离 ， 将 超 链接 转换 成 块 级 
元 素 ， 并 设置 外 边 距 为 ]px， 让 一 级 菜单 之 间 留 有 空隙 。 相 关 代 码 如 下 : 


#nav ul li a { 

color: white; 
background-color: #232E2E; 
text-decoration: none; 
text-align: center; 
padding: 20px; 

display: block; 
margin-right: lpx; 


刷新 页 面 后 ， 效 果 如 图 8.21 所 示 。 
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图 8.21 











加 当 鼠 标 悬 停 在 一 级 菜单 上 时 ， 设 置 一 级 菜单 的 文本 颜色 和 背景 色 ， 然 后 使 用 display 属 
性 让 二 级 菜单 隐藏 ， 相 关 代 码 如 下 : 


#nav ul li:hover a { 
color: white; 
background-color: #AC9072; 
#nav ul li ul { 

display: none; 


} 
刷新 页 面 后 ， 当 鼠 标 悬 停 在 一 级 菜单 上 时 ， 效 果 如 图 8.22 所 示 。 

















回 




















156 





第 8 章 制作 网 站 导航 菜单 








生子 DReW/CJampp/htdocyay84html 


EN Tan 中 He 


主页 国生 和 守 服务 产品 | 技术 








图 8.22 











四 当 鼠 标 悬 停 在 一 级 菜单 上 时 ， 设 置 display 属 性 显示 二 级 菜单 ， 并 设置 二 级 菜单 
position 属 性 为 absolute， 这 是 一 个 重要 的 设置 。 因 为 相对 于 一 级 菜单 ， 让 二 级 菜单 绝对 定 
位 ， 才 能 在 一 级 菜单 下 面 正确 显示 二 级 菜单 。 相 关 代 码 如 下 : 

#nav ul li:hover ul { 

display: block; 

position: absolute; 

; 


刷新 页 面 后 ， 当 鼠标 悬 停 在 一 级 菜单 上 时 ， 效 果 如 图 8.23 所 示 。 





















































目前 二 级 菜单 显示 的 过 于 紧凑 ， 为 了 改善 这 一 效果 ， 我 们 需要 对 二 级 菜单 的 超 链 接 
样式 进行 设置 。 首 先 将 超 链 接 转 换 成 块 元 素 ， 为 其 重新 设置 背景 颜色 ， 并 设置 一 定 的 宽度 ， 
然后 设置 二 级 菜单 的 底 边框 为 样式 ， 这 样 二 级 菜单 各 菜单 项 之 间 也 会 有 一 个 像素 的 间隙 ， 相 
关 代码 如 下 : 


#nav ul li:hover ul li a { 
display: block; 
background-color: #232E2E; 
width: 150px; 

border-bottom: solid lpx white; 
3》 


刷新 页 











团 





后 ， 当 鼠标 移动 到 一 级 菜单 上 时 ， 效 果 如 图 8.24 所 示 。 
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国 最 后 ， 为 了 让 二 级 菜单 和 一 级 菜单 具有 类 似 的 悬 停 效 果 ， 可 以 设置 二 级 菜单 超 链 接 
的 悬 停 样式 ， 改 变 文本 颜色 和 背景 色 ， 相 关 代 码 如 下 ; 
#nav ul li:hover ul li a:hover { 


color: #E67428; 
background-color: #316893; 


} 
刷新 页 面 后 ， 当 鼠标 悬 停 在 二 级 菜单 上 时 ， 效 果 如 图 8.25 所 示 。 



























































国 至 此 ， 用 CSS 和 列表 创建 的 二 级 菜单 效果 就 完成 了 。 
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HTML 表 单 作 为 Web 页 面 与 用 户 交互 的 重要 窗口 ， 一 直 是 网 站 开发 过 程 中 不 可 缺少 的 内 
容 。HTML 5 在 Form 表 单 的 应 用 上 提供 了 更 强大 的 功能 ， 本 章 主要 介绍 在 HTML 5 中 表单 的 使 








































































































9.1 表单 标签 

















HTML 5 中 新 增 了 很 多 新 的 表单 标签 ， 结 合 原 有 的 表单 控件 ， 方 便 程序 设计 者 创建 更 复 
杂 的 应 用 ， 下 面 我 们 对 这 些 表 单 标签 进行 详细 介绍 。 












































9.1.1 <form> 标 签 









































<form> 标 签 用 于 创建 一 个 表单 ， 开 始 标签 和 结束 标签 之 间 的 所 有 内 容 都 是 表单 中 的 内 
容 ， 当 用 户 提交 表单 时 ， 这 些 内 容 也 会 同时 提交 。<form> 表 单 有 很 多 属性 ， 各 属性 的 简单 介 
绍 如 下 表 所 示 。 












































表 9.1 
属性 描述 
action 定义 一 个 URL。 当 单 击 提交 按钮 时 ， 向 这 个 URL 发 送 数据 
data 自动 插入 数据 
replace 定义 表单 提交 时 做 的 事情 
accept 处 理 表单 的 服务 器 可 以 正确 处 理 的 内 容 类 型 列表 





accept-charset 


表单 数据 的 可 能 字符 集 列表 (默认 值 是 unknown) 





enctype 用 于 对 表单 内 容 进行 编码 的 MIME 类 型 
method 用 于 向 action URL 发 送 数 据 的 HTTP 方 法 (默认 是 get) 
target 在 何 处 打开 目标 URL 





























其 中 常用 的 几 个 属性 介绍 如 下 。 


(1) action 属 性 : 这 个 属性 值 可 以 是 程序 或 脚本 的 一 个 完整 的 URL， 也 可 以 是 表单 要 提 
交 的 地 址 。 要 提交 的 地 址 可 以 是 绝对 的 ， 也 可 以 是 相对 的 ， 还 可 以 是 一 些 其 他 形式 的 地 址 ， 





























QQ、 | 网 站 制作 、 发 布 与 维护 技术 实战 











例如 电子 邮箱 地 址 。 


<form action="mailto:zhangsan@163.com"> </form> 


(2) method 属 性 : 这 个 属性 值 有 两 个 ， 一 个 get， 一 个 post。 如 果 使 用 get， 那 么 来 访 者 
输入 的 数据 会 附加 在 URL 之 后 ， 用 户 端 直接 发 送 至 服务 器 ， 所 以 速度 上 会 比 post 快 ， 但 缺 


点 是 数据 长 度 




































































受 限 ， 这 也 是 method 属 性 的 默认 值 。 如 果 使 用 post， 表 单数 a 
































送 ， 用 户 端的 计算 机 会 通知 服务 器 来 读 取 数 据 ， 所 以 没有 











上 会 比 post 慢 。 





post 将 以 密 文 的 方式 发 送 数 据 。 





数据 长 度 上 的 限制 ， 缺 点 是 速 














另外 ， 使 用 get 会 在 发 送 的 URL 地 址 后 面 以 明文 的 方式 附加 要 发 送 的 数据 ， 




















(3) enctype 属 性 : 如 果 指 定 属性 值 为 textplain， 将 以 纯 文本 的 形式 传送 ， 如 果 指 定 属性 


值 为 application/x-www-form-urlencoded， 将 以 默认 的 编码 传送 ; 





form-data MIME 编 码 ， 上 传 文件 的 表单 必须 选择 该 项 。 


(4) target 属 性 ;target 属性 可 供 选择 的 值 有 4 个 ，_blank 是 指 将 返回 的 信息 显示 在 新 打开 
的 窗口 中 ，_parent 是 指 将 返回 的 信息 显示 在 父 级 的 浏览 器 窗口 中 ， 
显示 在 当前 浏览 


使 用 <form> 标 签 创建 一 个 简单 的 表单 界面 ， 相 关 代码 如 下 。 运 行 这 段 代码 后 ， 效 果 如 



































如 果 指 定 属性 值 为 multipart/ 





















































器 窗口 ，_top 表 示 将 返回 的 信息 显示 在 顶级 浏览 器 窗 









































<!doctype html> 


<html> 
<head> 


<meta charset="utf=8"> 


<title>9 
</head> 
<body> 


<form id= 


<label 
<input 
<label 
<input 
<label 
<input 
<label 
<input 
<input 
<input 
</form> 
</body> 
</html> 


.1</title> 


"form" action="#" method="post"> 
for="name"> 姓 名 : </label> 

id="name" name="name" type="text" /> <br> 
for="address"> 居 住地 址 : </label> 

id="address" name="address" type="text" /> < 
for="number"> 联 系 电话 : </label> 

id="number" name="number" type="number" /> < 
for="email"> 电 子 邮 箱 : </1label> 

id="email" name="email" type="email" /> <br> 








_self 则 表示 将 返回 的 信息 




















中 。 








出 











br> 


br> 


type="submit" value=" 提 交 " id="submit" name="submit" /> 
type="reset" value=" 重 置 " id="reset" name="reset" /> 























160 





第 9 章 制作 表单 





9.1.2 <fieldset> 标 签 

















当 表 单 中 的 内 容 很 多 时 ， 可 以 使 用 <fieldset> 标 签 将 相关 的 内 容 进 行 分 组 ， 分 组 后 的 标 
签 在 浏览 嚣 中 将 以 特殊 的 效果 显示 。 例 如 下 面 这 段 代码 ， 将 两 个 输入 标签 放 到 <fieldse 亿 标签 
Ph， 运行 这 段 代码 后 ， 效 果 如 图 9.2 所 示 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>9.2</title> 
</head> 
<body> 
<form id="login" method="post" action="#"> 
<fieldset> 
<label for="username"> 用 户 名 : </label> 
<input id="username" name="username" type="text" /> <br> 
<label for="password"> 密 ” 码 : </label> 
<input id="password" name="password" type="password" /> 
</fieldset> 
</form> 
</body> 
</html> 






































如 

















¢ 3 © Dfie//c/xampp/htdocs/3/92html 刀 
洋 本 大 “dreamweaverec2-。 HTML 





用 户 名 ， 


密码 


























9.1.3 <legend> 标 签 
<legend> 标 签 可 以 看 作 是 一 个 标题 标签 ， 它 可 以 为 <fieldset> 标 签 、<figure> 标 签 以 及 
<details> 标 签 定义 标题 。 例 如 ， 在 上 面 的 <fieldset> 标 签 中 添加 下 面 这 段 代码 : 
<legend> 登 录 </legend> 
刷新 页 面 后 ， 效 果 如 图 9.3 所 示 。 
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如 ER 站 dreamweavercc2- DD HTML 





登录 
用 户 名 : 
窗 码 : 


























161 





| 网 站 制作 、 发 布 与 维护 技术 实战 








9.1.4 <input> 标 签 


<inpu 人 > 标签 


























定义 form 表 单 中 的 输入 字段 ， 根 据 类 型 的 不 同 ， 可 以 定义 文本 框 、 密 码 





框 、 单 选 框 、 复 选 框 等 多 种 控件 。 其 属性 和 可 选 值 ， 以 及 相关 描述 如 表 9.2 所 示 : 





属性 


accept 


alt 
autocomplete 
autofocus 
checked 
disabled 


form 
inputmode 
list 

max 
maxlength 
min 

name 
readonly 
replace 


required 
sre 


template 


type 


value 


list_of mime types 


text 


bool 
bool 
bool 


bool 
inputmode 

id of a datalist 
number 
number 
number 


field name 


readonly 


text 
bool 


URL 

template 
button、checkbox、 
date、datetime、 
datetime-local、 
email、file、hidden、 
number、password、 
Tadio、range、Ieset、 
Ww、 week 


value 





表 9.2 


描述 

一 个 喜 号 分 隔 的 MIME 类 型 列表 ， 指 示 文 件 传输 的 MIME 类 型 。 只 
能 与 type="file" 配 合 使 用 

定义 图 像 的 替代 文本 。 只 能 与 type="image" 配 合 使 用 

自动 完成 

当 页 面 加 载 时 ， 使 输入 字段 获得 焦点 。 当 type="hidden" 时 无 法 使 用 。 
指示 此 input 元 系 首 次 加 载 时 应 该 被 选中 
当 input 元 票 首次 加 载 时 禁用 此 元 票 ， 这 样 用 户 就 无 法 在 其 中 写 文 
本 ， 或 选 定 它 。 注 意 不 能 与 type="hidden" 一 起 使 用 

定义 输入 字段 属于 一 个 或 多 个 表单 

定义 预期 的 输入 类 型 

引用 datalist 元 材 。 如 果 定义 ， 则 一 个 下 拉 列 表 可 用 于 向 输入 字段 插入 值 
输入 字段 的 最 大 值 

定义 文本 域 中 所 允许 的 字符 的 最 大 数目 

输入 字段 的 最 小 值 

为 input 元 系 定 义 唯一 的 名 称 

指示 是 否 可 修改 该 字段 的 值 

定义 当 表 单 提 交 时 如 何 处 理 该 输入 字段 

定义 输入 字段 的 值 是 否 是 必须 的 。 当 使 用 下 列 类 型 时 无 法 使 用 : 
hiddden、image、buttom、submit、reset 

定义 要 显示 的 图 像 的 URL， 只 有 当 type="image" 时 使 用 
定义 一 个 或 多 个 模板 

指示 input 元 系 的 类 型 。 默 认 值 是 "text"， 表 示 文 本 字段 ，password 表 
示 密 码 域 ，radio 表 示 单 选 按 钮 ，checkbox 表 示 复 选 框 ，button 表 示 普 
通 按钮 ，submit 表 示 提交 按钮 。 提 交 按 钮 是 一 种 特殊 的 按钮 ， 不 需要 
设置 onclick 参 数 ， 在 单 击 该 类 型 按钮 时 可 以 实现 表单 内 容 的 提交 。 
Teset 表 示 重 置 按钮 ， 单 击 该 按钮 时 清除 用 户 在 页 面 上 的 输入 信息 。 
image 表 示 图 像 域 ，hidden 表 示 隐 茂 域 ，file 表 示 文 件 域 。 










































































对 于 按钮 、 重 置 按 钮 和 确认 按钮 : 定义 按钮 上 的 文本 。 对 于 图 像 按 
钮 : 定义 传递 向 某 个 脚本 的 此 域 的 符号 结果 。 对 于 复 选 框 和 单 选 按 
钮 : 定义 input 元 丢 被 点 击 时 的 结果 。 对 于 隐藏 域 、 密 码 域 以 及 文本 
域 :定义 元 系 的 默认 值 
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例如 下 
所 示 。 


回 











<!dqoctype h 
<html> 
<head> 
<meta chars 








tml> 


et="utf-8"> 

















这 段 代码 ， 在 表单 中 定义 多 种 类 型 的 输入 控件 。 运 行 这 段 代 码 后 ， 效 果 如 图 9.4 











<title>9.3</title> 
</head> 
<body> 
<form id="form" action="#" method="post"> 
<fieldset> 
<legend> 基 础 信息 </legend> 
<label for="username"> 用 户 名 : </1label> 
<input type="text" id="username" /> <br> 
<label for="password"> 密 ” 码 : </label> 
<input type="password" id="password" /> <br> 
<label> 性 别 : </label> 
<input type="radio" name="sex" id="sex" value="1" /> 
<label for="sex"> 男 </label> 
<input type="radio" name="sex" id="sex" value="2" /> 
<label for="sex"> 女 </label> <br> 
<label for="address"> 地 址 : </label> 
<input type="text" id="address" /> <br> 
<label for="number"> 电 话 : </label> 
<input type="number" id="number" /> <br> 
</fieldset> 
<fieldset> 
<legend> 推 送 消息 </legend> 
<label for="fav"> 推 荐 新 闻 </label> 
<input type="checkbox" id="fav" name="fav" value="1"/> 
<label for="fav"> 娱 乐 <//label> 
<input type="checkbox" id="fav" name="fav" value="2"/> 
<label for="fav"> 体 育 </label> 
<input type="checkbox" id="fav" name="fav" value="3"/> 
<label for="fav"> 视 频 </label> 
<input type="checkbox" id="fav" name="fav" value="4"/> 
</fieldset> 
<fieldset> 
<legend> 添 加 附件 </legend> 
<label for="img"> 图 像 </label> 
<input type="file" id="img" name="img" size="50" maxlength="255"/> 
</fieldset> 
<fieldset> 
<legend> 提 交 </legend> 


<input type="submit" value="submit" id="submit" name="submit"/> 
<input type="reset" value="reset" id="reset" name="reset"/> 


</fieldset 
</form> 
</body> 


> 
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</html> 





图 俐 【吉本 宗 ] 半生 作风 > 件 
3 


subm| eet 


























9.1.5 <select> 标 签 























<selec 亿 标签 用 于 创建 下 拉 列 表 ， 常 用 的 属性 介绍 如 下 表 9.3 所 示 。 
表 9.3 















data wl 


autofocus bool E 页 面 加 载 时 使 用 这 个 select 字 段 获得 焦点 














供 自动 插入 数据 


disabled bool 当 该 属性 为 tue 时 ， 会 禁用 该 菜单 
form bool 定义 select 字 段 所 属 的 一 个 或 多 个 表单 
multiple bool 当 该 属性 为 tue 时 ， 规 定 可 一 次 选 定 多 个 项 目 









例如 ， 在 form 表 半 











<!doctype html> 
<html> 
<head> 


name Unipue_name 定义 下 拉 列 表 的 唯一 标识 符 


中 <select> 标 签 创建 性 别 选择 功能 ， 相 关 代 码 如 下 所 示 : 








<meta charset="utf-8"> 
<title>9.4</title> 


</head> 

<body> 

<form id="form" 
<fieldset> 


action="#" method="post"> 


<legend> 性 别 </legend> 

<select multiple="false" id="sex" name="sex"> 
<option> 男 </option> 
<option> 女 </option> 
<option> 保 密 </option> 


</select> 
</fieldset> 
</form> 
</body> 
</html> 
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后 ， 在 页 面 中 可 以 看 到 如 图 9.5 所 示 的 下 拉 列 表 。 

















© Dfile///C/xempp/htdocs/9/9.4html 从 三 
于 本 D dreamweaver cc 2.. DI HTML 


























9.1.6 <option> 标 签 


<option> 标 签 




































































于 为 <selec 人 > 标签 或 <datalis 亿 标签 添加 选项 ， 每 一 
个 选项 。 该 标签 有 4 个 属性 ，disabled 属 性 规定 此 选项 应 在 首次 加 载 时 被 禁 


个 <option> 标 签 代表 一 




















，label 属 性 定义 


使 用 <optgroup> 时 所 使 用 的 标注 ，selected 属 性 规定 选项 表现 为 选中 状态 ，value 属 性 定义 送 往 


服务 器 的 选项 值 。 


























9.1.7 <optgroup> 标 签 


<optgroup> 标 签 用 于 定义 一 个 选项 组 。 在 这 个 选项 组 中 ， 还 可 以 进一步 对 组 上 
行 划分 。<optgroup> 标 签 的 label 属 性 用 了 









































载 时 ， 禁 用 该 选项 组 。 例 如 下 面 的 代码 : 


<!doctype html> 











<html> 
<head> 

















<meta charset="utf-8"> 
<title>9.5</title> 


</head> 
<body> 


<form id="form" action="#" method="post"> 


<fieldset> 


<legend> 选 择 行业 </1legend> 


<select multiple="multiple" id="jobs" name="jobs"> 


<optgroup label=" 生 产 制造 "> 

<option value=" 汽 车 制造 "> 汽车 制造 </option> 
<option value=" 印 刷 包 装 "> 印刷 包装 </option> 
<option value=" 机 械 机 床 "> 机 械 机 床 </option> 
</optgroup> 


<optgroup labe 
<option value= 





"服务 业 "> 
运动 健身 "> 运动 健身 </option> 





<option value=" 酒 店 旅游 "> 酒店 旅游 </option> 
<option value=" 美 容 保健 "> 美容 保健 </option> 
<option value=" 公 务 员 "> 公务 员 </option> 
</optgroup> 


需要 注意 的 是 ，<option> 标 签 在 其 他 地 方 使 用 没有 任何 意义 。 
































h 的 选项 进 
F 定 义 选项 组 的 标注 ，disabled 属 性 用 于 设置 在 


首次 加 
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</select> 
</fieldset> 
</form> 
</body> 
</html> 








运行 这 段 代码 后 ， 效 果 如 图 9.6 所 示 。 














口 fleVWCYxampp/htdocs/9/9.5html 从 三 


于 二 于 [dreamweaver cc2-， 吕 HIML 











9.1.8 <textarea> 标 签 











<textarea> 标 签 用 于 定义 














属性 

autofocus bool 

cols number 

disabled bool 

form bool 

inputmode inputmode 

name name _of textarea 
readonly bool 

required bool 

TOWS number 
































例如 下 面 这 段 代 码 ， 使 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>9.6</title> 
</head> 

<body> 








textarea 标 签 创建 了 一 个 留言 框 ， 运 行 效果 如 图 
































表 9.4 
描述 
在 页 面 加 载 时 该 textare 获 得 焦点 
规定 文本 区 域 可 见 的 列 数 
当 次 文本 区 首次 加 载 时 禁用 此 文本 
定义 该 textarea 所 属 的 一 个 或 多 个 表单 
定义 该 textarea 所 期 望 的 输入 类 型 
为 此 文本 区 规定 一 个 名 称 
指示 用 户 无 法 修改 文本 区 内 的 内 容 





个 多 行文 本 输入 区 域 ， 用 户 可 以 在 此 文本 区 域 中 输入 文本 ， 文 
本 的 数量 没有 限制 。<textarea> 标 签 有 很 多 有 用 的 属性 ， 如 表 9.4 所 示 。 





定义 为 了 提交 表单 ， 该 textarea 的 值 是 否 是 必须 的 








规定 文本 区 内 可 见 的 行 数 


























<form id="form" action="#" method="post"> 


<fieldset> 
<legend> 评 论 </legend> 


9.7 所 示 。 
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<label for="note"> 把 你 的 想法 说 出 来 吧 </1label><br> 
<xtextarea ‘id="note” name="noten cols="50" rFOWS="10 autofocus></ 
textarea> 

</fieldset> 

<input type="submit" value=" 提 交 " id="submit" name="submit"/> 

<input type="reset" value=" 重 置 " id="reset" name="reset"/> 
</form> 
</body> 
</html> 


55 
€ SC 记 fileV//CVxampp/htdocy9/9.6html 3 
ED deamweanercc2- DHIML 

把 你 的 想法 说 出 未 吧 























9.2 ”创建 表单 结构 


表单 其 实 就 是 以 <form> 标 签 为 容器 ， 嵌 套 其 他 表单 标签 的 一 种 结构 。 所 有 的 表单 标签 必 
须 嵌 套 在 <form> 标 签 内 部 才 有 效 ， 表 单 标 签 的 主要 作用 就 是 收集 用 户 的 输入 信息 。 

最 基本 的 表单 至 少 要 包含 3 个 属性 ，id、action 和 method。id 属 性 用 于 指定 表单 的 唯一 
性 ; action 属 性 指定 表单 的 处 理 程 序 ， 当 点 击 表单 中 的 提交 按钮 时 ， 表 单 中 的 所 有 数据 将 发 
送 到 action 属 性 指定 的 服务 器 进行 处 理 ，method 属 性 指定 浏览 器 如 何 处 理发 送 的 数据 ， 如 果 是 
post 则 以 密 文 的 方式 传递 数据 ， 如 果 是 get， 则 以 明文 的 方式 传递 数据 。 

例如 下 面 这 段 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<titlie>9 7</title> 

</head> 

<body> 

<form id="Myform" action="http://www.aa.com/do" method="post"> 
<p> 用 户 名 : <input name="username" type="text" id="username"/></p> 
<p> 密 ” 码 : <input name="userpass" type="password" id="userpass"/></p> 







































































下 
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<input type="submit" value=" 提 交 " id="submit" name="submit"/> 
<input type="reset" value=" 重 置 " id="reset" name="reset"/> 


</form> 
</body> 
</html> 


在 这 段 代 码 中 ， 指 定 表单 的 id 为 Myform，action 属 性 指 





定 为 URL 地 址 ， 最 后 的 do 表示 提 








交 数 据 的 处 理 程序 ， 而 method 指 定 提交 的 数据 以 post 的 方式 提交 。 在 这 个 表单 中 ， 前 两 个 

















input 标 签 用 于 输入 用 户 名 和 密码 ， 


























后 两 个 input 标 签 








代码 后 ， 效 果 如 图 9.8 所 示 ， 这 就 是 











< C 


个 最 基本 的 表 


D file#///C/xampp/htdocs 


洲 亚 天 0 dreamweaver ee 2 HIML 


用 户 名 ， 


密码; 
提交 | 量 轩 





9.8 
































户 设置 


单 结构 。 











/3/97html 去 








提交 按钮 和 重 


9.3 验证 表单 








E 置 按钮 。 运 行 这 段 
































表单 是 网 站 与 用 户 交互 的 窗 
会 影响 到 网 站 的 安全 和 正常 运行 。 为 
要 对 数据 进行 有 效 的 验证 。 


9.3.1 表单 验证 的 原理 


表单 验证 可 以 分 为 两 类 ， 一 类 是 
过 一 个 服务 端 程序 来 执行 验证 操作 ， 



































来 收集 用 户 的 输入 信息 ， 


但 有 时 恶意 或 无 效 的 信息 ， 

















了 避免 这 些 事 




















情 的 发 生 ， 使 用 表单 在 收集 信息 的 时 候 需 


























证 用 户 提交 的 数据 是 否 符合 要 求 ， 如 
验证 就 是 服务 端 验证 最 典型 的 应 




















果 不 符合 要 求 ， 则 会 抛 出 




















R 务 端 验证 ， 另 一 类 是 客户 端 验证 。 服 务 端 验证 需要 通 


户 需要 将 数据 提交 到 服务 端 ， 服 务 端 根据 相关 程序 验 














一 个 错误 信息 。 网 站 用 户 登录 

















客户 庙 验 证 与 服务 端 验证 最 大 的 一 














端 去 验证 ， 而 是 在 用 户 提交 数据 之 











个 区 别 就 是 ， 客 户 端 验证 不 需要 
前 ， 对 这 些 数据 进行 验证 ， 这 样 可 











户 将 数据 提交 到 服 











义 有 效 避 人 免 不 必要 的 

















iT 汶 


与 服务 端 交互 的 过 程 。 因 为 很 多 情况 














下 ， 用 户 提交 的 数据 在 客户 端 就 能 完整 有 效 性 的 验证 ， 











这 些 操作 不 需 要 去 服务 端 执行 。 例 如 


新 用 户 注 册 时 ， 输 入 密码 的 有 效 性 























和 复杂 度 是 否 符合 要 求 ， 这 类 操作 完全 
在 HIML 5 中 ，input 标 签 的 type 属 性 可 

















些 数据 的 初步 验证 。 例 如 下 面 这 段 代码 : 














以 在 客户 端 完成 验证 。 
以 指定 用 户 输入 内 容 的 类 型 ， 


验证 ， 验 证 密码 长 度 


这 样 就 可 以 完成 对 这 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>9.8</title> 


</head> 

<body> 

<form id="form" action="#" method="post"> 
<h2> 电 子 邮 箱 </h2> 


<input type="email" /> 

<input type="submit" value=" 提 交 "/> 
</form> 

</body> 

</html> 


在 这 段 代码 中 ，input 标 签 的 type 类 型 为 email， 如 果 用 户 输入 的 信息 不 符合 email 的 格式 ， 














那么 在 提交 按钮 时 就 会 抛 出 一 个 错误 提示 。 如 图 9.9 所 示 是 谷歌 浏览 中 的 提示 效果 ， 不 同 的 浏 
览 器 提示 信息 的 格式 会 有 差异 。 


证 。 














@ | D file///C/xampp/htdocs/3/9.8 html 


dreammemer ez 加 HTML 


困苦 e 子 归 伯 节 tt 中 所 
括 各" “sdfsdf 中 后 
» 名" ， 








图 9.9 














input 标 签 其 他 类 型 比如 url、number、date 等 ， 都 可 以 在 提交 数据 之 前 完成 有 效 性 的 验 
需要 注意 的 是 ， 通 过 HTML 5 标签 来 完成 数据 验证 的 操作 ， 只 能 在 点 击 提交 按钮 的 时 候 























才能 完成 ， 而 且 HTML 5 标签 只 提供 了 这 些 类 型 最 基本 的 验证 功能 ， 如 果 需 要 更 负责 的 完成 
验证 功能 ， 还 需要 配合 JavaScript 功 能 的 使 用 。 例 如 下 面 这 段 代码 : 









































<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>9.9</title> 

<script language="javascript"> 
function check(){ 

Var msg=""; 

Var value=document .getElementById("email") .value; 
if(value==null || value=="") 
msg=" 请 输入 电子 邮箱 地 址 ! "; 

和 

if(value.indexof(“8@”)==-1) 

* 

msg=" 电 子 邮 箱 地 址 必须 包含 @" ; 
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} 

document .getElementById ("msg") .innerHTML=msg; 
站 

</script> 

</head> 

<body> 

<form id="form" action="#" method="post"> 
<h2> 电 子 邮 箱 </h2> 

<input type="email" id="email" onBlur="check()" /> 
<input type="submit" value=" 提 交 "/><br> 
<label id="msg"></label> 





</form> 

</body> 

</html> 

在 这 段 代码 中 ， 我 们 在 input 标 签 中 添加 了 onBlur 事 件 。 当 input 标 签 失去 焦点 时 触发 check 























方法 ，check 由 JavaScript 实 现 ， 先 判断 input 控 件 的 值 是 否 为 空 ， 如 果 为 空 ， 那 么 设置 提示 信 
息 “ 请 输入 电子 邮箱 地 址 ! ”， 然 后 判断 值 是 否 包 含 @， 如 果 不 包含 ， 那 么 设置 提示 信息 
“电子 邮箱 地 址 必须 包含 @”， 最 后 将 提示 信息 赋值 到 label 标 签 。 运 行 这 段 代 码 后 ， 在 输入 
框 中 随便 输入 几 个 字母 ， 然 后 点 击 空白 处 ， 这 样 就 会 显示 错误 信息 ， 效 果 如 图 9.10 所 示 。 







































































99 
€ 3 GDfleVWCVxampp/htdocsy/9/39html 
EN dreamwemer ee 2 CI HTML 


电子 邮箱 


st 3 
庶子 印 逢 地 址 必须 包含 @ 





图 9.10 











HIML 5 中 还 提供 了 required 属 性 ， 当 input 标 签 添加 该 属性 后 ， 输 入 的 内 容 不 能 为 空 ， 而 
pattem 属 性 还 可 以 指定 输入 内 容 必须 符合 指定 的 正则 表达 式 ， 例 如 下 面 这 段 代码 : 

<input id="phone " name="phone " type="text" required pattern="\d{3}-\ 
d{4}-\d{4}" placeholder="xxx-xxxx-xXxXxx"/> 

这 段 代码 表 示 一 个 输入 文本 框 ， 这 个 文本 框 不 能 为 空 ， 而 且 输 入 的 内 容 必须 满足 pattern 
指定 的 正则 表达 式 。 
































9.3.2 在 Dreamweaver 中 添加 表单 验证 行为 
在 Dreamweaver 中 ， 还 可 以 通过 可 视 化 操作 界面 为 表单 添加 验证 行为 ， 详 细 操作 步骤 如 下 ; 


加 新 建 一 个 HTML 文件， 将 光标 定位 到 body 元 素 内。 
加 选择 “插入 ”一 “表单 ”一 “表单 ”命令 ， 在 HTML 页 面 内 插入 一 个 表单 ， 然 后 以 相 
同 的 方法 再 插入 一 个 文本 ， 如 图 9.1 所 示 。 
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<!1doctype html> 
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jQuery UI 


图 9.11 


加 将 光标 定位 到 插入 的 文本 框 中 ， 可 以 在 属性 面板 中 看 到 文本 框 的 相关 属性 。 设 置 
Name 属 性 值 为 phone， 勾 选 Auto Focus 和 Required 两 个 复 选 框 ， 表 示 该 输入 框 自动 获得 焦点 ， 
而 且 是 必 填 信息 ;设置 PlaceHolder 属 性 值 为 XXX-XXXX-XXXX， 表 示 该 文本 框 的 提示 信息 ; 设置 
Pattern 属 性 值 为 \d{3}-\d{4}-\d{4}， 表 示 该 文本 框 的 内 容 必须 符合 这 个 正则 表达 式 ， 效 果 如 图 


9.12 所 示 。 


Dw wan me) BV EAM 人 性 (MI MIO) 二 SC Wa AW EabH) 


aahem 
【LA 而 | 白 分 | 设计 “项 枯 。 蜀 。 性 题 天 于 时 


下 





“idoctype ha 
htnty 


<head 

| cneta charset-nutf-en> 
<ritte> 无 标 征文 村 </ritte> 
</head> 


2 


ace meee ree 


| | sete 3 VHT EE i 





@ 


bs 


图 9.12 











作为 页 面 和 























户 交 互 的 窗 




















表单 的 设计 越 人 性 化 就 越 能 抓 住 

















使 用 在 线 表单 服务 


户 的 眼球 。 我 们 设计 一 
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个 表单 需要 花费 很 长 的 时 间 和 精力 ， 结 果 还 可 能 令 人 不 满意 。 使 用 在 线 表 单 服务 ， 就 可 以 直 























接 用 拖 搜 的 方式 ， 轻 松 创 建 各 种 漂亮 的 表单 。 






















































































前 可 使 用 的 在 线 表单 服务 很 多 ， 基 本 上 通过 简单 的 注册 后 就 可 以 使 用 ， 如 图 9.13 所 示 


的 界面 就 是 一 个 非常 方便 快捷 的 在 线 表单 服务 网 站 截图 。 在 左 侧 的 选择 区 域 中 ， 已 经 提供 了 
























































各 种 常用 表单 的 控件 ， 点 击 相应 的 控件 就 可 以 将 其 添加 到 右边 的 预览 窗口 中 ， 在 预览 窗口 中 


















































选中 添加 的 控件 ， 左 边 的 区 域 就 会 显示 该 控件 的 相关 属性 ， 如 图 9.14 所 示 ， 用 户 可 以 根据 






































己 的 需要 设置 相关 的 属性 。 最 终 完成 设置 后 ， 保 存 表单 即 可 。 





























9.5 制作 表单 页 面 




























































































本 例 将 制作 一 个 用 户 注册 的 表单 页 面 ， 帮 助 大 家 巩固 和 加 强 表单 制作 的 技能 。 
页 面 最 终 效果 如 图 9.15 所 示 。 详 细 制 作 步 骤 如 下 : 
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四 新 建 一 个 HTML 页 面 ， 分 析 如 图 9.15 所 示 的 效果 ， 该 页 面 布局 可 分 为 上 中 下 3 部 分 结 
构 ， 上 面 一 个 区 域 用 于 显示 右上 角 的 菜单 ， 中 间 一 个 区 域 用 于 显示 内 容 区 域 的 菜单 ， 下 面 
一 个 区 域 用 于 显示 表单 、 页 面 底部 导航 和 版 权 等 信息 。 根 据 以 上 分 析 ， 编 写 HIML 代 码 如 
下 所 示 。 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 
<body> 
<div id="container"> 
<div id="header"> 
<ul> 
<1i><a href="#"> 投 稿 </a></1i> 
<1i><a href="#"> 登 陆 </a></1i> 
<1i><a href="#"> 注 册 </a></1i> 
</ul> 
</div> 
<div id="ContentMenu"> 
<ul> 
<1i><a href="#"> 首 页 </a></1i> 





<li><a #"> 看 点 </a></1i> 
<li><a #"> 互 联网 </a></1i> 
<1i><a #"> 创 投 界 </a></1i> 
3 #"> 电 商界 </a></1i> 
<li><a #"> 移 动 库 </a></1i> 
<1i><a href="#"> 图 说 </a></1i> 
</ul> 
</div> 


<div id="mainContent"> 
<div id="regForm"> 
<form> 
<ul> 
<1i><h3> 注 册 帐 户 </h3></1i> 
<1li><span class="labelSpan"> 登 陆 账号 ; </span><input 
type="text" /><span class="noteSpan">* (可 以 使 用 中 文 , 但 禁止 除 [@] [ . ] 以 外 的 特殊 符号 ) </ 
span></1i> 
<1li><span class="labelSpan"> 昵 称 : </span><input 
type="text" /></1i> 
<li><span class="labelSpan"> 登 陆 密码 : </span><input 
type="password" /><span class="noteSpan">*</span></1i> 
<li><span class="labelSpan"> 确 认 密 码 : </span><input 
type="password" /><span class="noteSpan">*</span></1i> 
<li><span class="labelSpan"> 电 子 邮 箱 : </span><input 
type="email" /><span class="notespan">* (每 个 电子 邮箱 只 能 注册 一 个 账号 ) </span></1i> 
<li><span class="labelSpan"> 验 证 码 : </span><input 
type="text" /><img src="img/img01.png"/></1i> 
<li><span class="labelSpan">&gnbsp;</span><input 
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type="submit" value=" 完 成 注册 " /></1i> 


</uL> 
</form> 
</div> 
<div id="footerMenu"> 
<ul> 
<1i><a href="#"> 关 于 我 们 </a>&nbsp; | &nbsp;</1i> 
<1i><a href="#"> 加 入 我 们 </a>&nbsp; | &nbsp;</1i> 
<1i><a href 人 =-"#"> 广 告 及 服务 </a>&nbsp; | enbsp;</1i> 
<1i><a href="#"> 常 见 问题 解答 </a>gnbsp; | &nbsp; </1i> 
<1i><a href="#"> 提 交 建 议 </a></1i> 
</ul> 
</div> 


<div id="footer"> 
<p>Copyright &copy; 2014-2015 D&C 版 权 所 有 </p> 
</div> 
</div> 
</div> 
</body> 
</html> 


这 段 代码 在 浏览 器 中 的 效果 如 图 9.16 所 示 。 




















© |D file///C/ampp/htdocs/9/3.21.html 
LL treammemer ce 2 HIM 


“(可 以 使 用 中 文 ， 丰 将 止 陈 [9][. ] 以 外 的 特殊 符号 ) 


(等 个 电子 部 条 有 能 入 时 一个 下 
从 


Copyrieht 5 2014-2015 TSC 版 机 所 有 








图 9.16 











园 这 个 页 面 中 有 3 处 使 用 了 导航 菜单 ， 我 们 前 面 已 经 介绍 过 导航 菜单 的 制作 方法 ， 这 里 
就 不 再 熬 述 ， 直 接 给 出 样式 代码 如 下 : 


<style> 
margin:0; 
padding:0; 

4 
#container{ 
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text-decoration:none; 
font-size:12px; 
font-weight:bold; 
color:#2D2D2D; 
padding:3px 10px; 

, 

#fo0terMenuf 
height:25px; 
background-color:#2D2D2D; 
font-size:12px; 
color:white; 
text-align:center; 

" 

#footerMenu uli 
list-style:none; 
display:inline-block; 
1 

#footerMenu ul 1i{ 
float:left; 
line-height:25px; 
font-family: ' 微 软 雅 黑 '; 
#footerMenu ul 1i af 
text-decoration:none; 
font-size:12px; 
font-weight:bold; 

















color:white; 

于 

</style> 

刷新 页 面 后 的 效果 如 图 9.17 所 示 。 
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(可 以 使 用 中 文 ， 但 兰 止 除 [8][, ] 以 外 


个 电 了 部 箱 只 能 注册 一 个 球 号 ) 





fev/te: mampp docs/9/32L hms 





图 9.17 











国 下面 设置 form 表 单 样式 。 首 先 要 让 form 表 单 与 周围 其 他 元 素 分 离开 来 ， 通 过 设置 form 
表单 的 内 边 距 即 可 达到 这 样 的 效果 ， 相 关 代 码 如 下 : 
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#regForm formti 
padding:30px 40px; 
. 


刷新 页 








团 


后 的 效果 如 图 9.18 所 示 。 
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班 BR reameemer ce 2 口 HTML 


(可 以 使 用 中 文 ， 但 禁止 队 10][.] 以 外 的 村 


电子 邮箱 只 能 注 基 “个 环 号 ) 








图 9.18 











四 表单 中 的 各 个 元 素 使 用 列表 显示 ， 这 里 需要 取消 列表 项 前 面 的 小 黑 点 ， 然 后 设置 列 


让 局 ， 办 


表 项 的 字体 大 小 、 颜 色 和 每 个 列表 项 距离 下 一 个 列表 项 的 距离 ， 相 关 代 码 如 下 : 


#regForm form ulf{ 
list-style:none; 

F 

#regForm form ul 1it{ 
font-size:12px; 
color:#555555;» 
margin-bottom:13px; 
3 


刷新 浏览 器 后 的 效果 如 图 9.19 所 示 。 
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图 9.19 
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辆 为 了 让 表单 中 的 标签 对 齐 显示 ， 我 们 设置 每 个 span 标 签 的 宽度 为 60 像 素 ， 并 设置 
display 属 性 为 inline-block， 让 span 元 素 在 行内 以 块 级 元 素 显示 ， 并 设置 文本 向 右 对 齐 ， 相 关 
代码 如 下 所 示 : 


#regForm ul 1i .labelspant{ 
width:60px; 
display:inline-block; 
text-align:right; 

. 


刷新 浏览 器 后 的 效果 如 图 9.20 所 示 。 
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图 9.20 











下 面 设置 表单 标题 与 提示 信息 的 样式 ， 以 及 图 形 验 证 码 的 尺寸 ， 相 关 代 码 如 下 
所 示 : 


#regForm form ul 1i h3{ 
color:#2D2D2D; 

} 

#regForm ul 1i .notespant{ 
display:inline-block; 
font-size:10px; 
font-style:oblique; 
#regForm ul 1i img{ 
width:60px; 
height:20px; 
vertical-align:bottom; 
让 


刷新 浏览 器 后 的 效果 如 图 9.21 所 示 。 
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9.21 














form 表 单 中 默认 的 提交 按钮 样式 与 目前 页 面 的 风格 很 不 相称 ， 我 们 可 以 通过 CSS 样 式 


对 其 进行 修改 ， 相 关 代码 如 下 所 示 : 


#regForm ul 1i input[type="submit"]1{ 
background-color:#58AD44; 
color:white; 

font-size:13px; 

font-weight:bold; 

padding:8px 15px; 

border-radius:4px; 

border:hidden; 


刷新 浏览 器 后 的 效果 如 图 9.22 所 示 。 


ES 四 
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图 9.22 











国 最 后 通过 CSS 样 式 设置 页 面 底部 版 权 信 息 的 样式 ， 





相关 代码 如 下 所 示 。 
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#footert{ 

height:50px; 
text-align:center; 
font-size:10px; 
font-family:' 微 软 雅 黑 '; 
有 

#fo0ter pt{ 

display: inline-block; 
line-height:50px; 

. 


刷新 页 








团 


后 的 效果 如 图 9.23 所 示 。 
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图 9.23 
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JavaScript 是 HTML 页 面 中 另 一 个 非常 重要 的 内 容 ， 早 期 很 多 的 网 页 效果 都 是 通过 
JavaScript 来 完成 的 .虽然 目前 HTML 页 面 很 多 效果 都 可 以 通过 CSS 来 完成 ， 但 是 复杂 一 些 的 网 
页 效果 仍然 需要 使 用 JavaScript 来 完成 ， 本 章 我 们 先 来 看 一 下 JavaScript 的 基础 知识 。 































































































10.1 JavaScript 概 述 






































JavaScript 是 目前 Web 应 用 程序 开发 者 使 用 最 广泛 的 客户 端 脚本 编程 语言 ， 它 不 仅 可 
开发 交互 式 的 Web 页 面 ， 还 可 以 将 HTML、XML 和 Java Applet、Flash 等 功能 NA 
机 结合 起 来 ， 使 开发 人 员 能 快捷 地 生成 Internet 或 Intranet 上 使 用 的 分 布 式 应 用 程序 。 另 外 ， 
于 Windows 给 予 其 最 为 完善 的 支持 并 提供 二 次 开发 的 接口 来 访问 操作 系统 各 组 件 并 实施 相应 
的 管理 功能 ，JavaScript 成 为 继 .bat( 批 处 理 文件 ) 以 来 Windows 系 统 里 使 用 最 为 广泛 的 脚本 
语言 。 

JavaScript 非 常 强 大 ， 下 面 我 们 来 看 一 下 JavaScript 的 特点 。 

(1) JavaScript 是 一 种 脚本 语言 ， 同 样 也 是 一 种 解释 性 语言 ， 采 用 小 程序 段 的 方式 实现 
编程 ， 为 用 户 提供 了 一 个 简单 的 开发 过 程 。 

(2) JavaScript 是 一 种 基于 对 象 的 语言 ， 它 可 以 创建 和 使 用 对 象 ， 许 多 功能 都 以 对 象 为 
基础 ， 通 过 操作 对 象 的 属性 来 实现 相应 的 功能 。 

(3) 简单 性 ， 首先 它 是 一 种 基于 Java 基 本 语句 和 控制 流 之 上 的 简单 而 紧凑 的 设计 ， 对 于 
学 习 Java 是 一 种 非常 好 的 过 渡 。 其 次 它 的 变量 类 型 采用 弱 类 型 ， 并 未 使 用 严格 的 数据 类 型 。 

(4) 安全 性 : 它 不 允许 访问 本 地 的 硬盘 ， 并 不 能 将 数据 存 入 到 服务 器 上 ， 不 允许 对 网 
络 文档 进行 修改 和 删除 ， 只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ， 从 而 有 效 地 防止 数据 的 
丢失 。 









































































































































































































































































































































(5) 动态 性 ;JavaScript 可 以 直接 对 用 户 或 者 客户 输入 做 出 响应 ， 无 须 经 过 Web 服 务 程 
序 。 它 对 用 户 的 反映 响应 ， 是 采用 以 事件 驱动 的 方式 进行 的 。 也 就 是 当 我 们 按 下 鼠标 ， 移 动 
窗口 、 选 择 菜单 等 事件 发 生 时 响应 的 。 

(6) 跨 平台 性 : JavaScript 依赖 浏览 器 本 身 ， 与 操作 环境 无 关 ， 只 要 能 运行 计算 机 ， 
安装 有 支持 javascript 的 浏览 器 就 可 以 正确 执行 。 
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10.2 JavaScript 基 本 语法 



































己 的 设计 编写 正确 、 高 效 的 代码 。 














10.2.1 JavaScript 书 写 方式 





JavaScript 有 两 种 书写 方式 ， 一 种 是 直接 把 JavaScript 写 在 HTML 页 面 里 ， 另 一 种 是 新 建 





签 引入 JavaScript 文 件 。 














直接 写 JavaScript 的 时 候 ， 可 以 将 JavaScript 写 在 
中 ， 无论 直 接 写 在 哪里 ， 都 需要 将 JavaScript 代 码 写 在 <scrip 全 标签 中 。 例 如 下 











<head> 标 签 中 的 JavaScript 代 码 输出 一 个 字符 























出 一 个 提示 信息 ， 这 段 代码 运行 后 的 效果 如 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>10.1</title> 
<script> 











， 而 <body> 标 签 
图 10.1 所 示 。 


document .writeln (" 欢 迎 来 到 JavaScript 的 世界 ! ") ; 


二 人 下 

</head> 

<body> 

<script> 

alert ("这 是 网 页 中 的 内 容 ! ") 
eripe> 

</body> 

</html> 


3 fe///C/ampp/htdocs/10/10.Lhtml 


“JavaScript 提要 








JavaScript 文 件 的 后 缀 名 是 .js， 如 果 将 JavaScript 代 码 写 在 JavaScript 文 件 
<scrip 亿 标签 的 src 属 性 指定 这 个 JavaScript 文 件 的 路 径 ， 例 如 下 面 





图 











10.1 

































































每 一 种 语言 都 有 自己 的 语法 ，JavaScript 也 不 例外 。 只 有 掌握 了 最 基本 的 语法 ， 才 能 按 


BB 


























照 


个 JavaScript 文 件 ， 将 JavaScript 代 码 写 在 JavaScript 文 件 里 ， 然 后 在 HITML 页 面 中 通过 script 标 


E<head> 标 签 中 ， 也 可 以 写 在 <body> 标 签 
这 段 代 码 ， 
hh 的 JavaScript 代 码 


弹 




















这 段 代码 ; 











， 而 
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<script type="text/javascript" src="js/index.js"></script> 


10.2.2 执行 顺序 与 生命 周期 

















































































































































































































































































































































































































JavaScript 遵 循 自 上 而 下 的 执行 顺序 ， 也 就 是 说 浏览 器 在 解析 JavaScript 语 言 的 时 候 ， 是 按 
照 JavaScript 的 书写 顺序 进行 解析 ， 如 果 将 JavaScript 的 方法 声明 写 在 JavaScript 调 用 之 后 ， 就 
会 出 现 错误 。 通 常情 况 下 ， 如 果 直 接 将 JavaScript 写 在 HTML 页 面 中 ， 所 有 的 JavaScript 代 码 应 
该 都 写 在 <head> 标 签 中 。 如 有 特殊 需要 ， 也 可 以 将 JavaScript 写 在 <body> 标 签 中 ， 比 如 引用 的 
JavaScript 文 件 比较 大 ， 为 了 提高 HTML 页 面 的 加 载 速 度 ， 可 以 将 JavaScript 引 用 写 在 <body> 标 
签 的 最 下 面 。 

JavaScript 定 义 的 变量 和 函数 只 在 当前 页 面 有 效 ， 如 果 离开 当前 页 面 ， 这 些 变量 和 函数 将 
无 法 访问 ， 如 果 确 实 需要 继续 访问 ， 可 以 考 怕人 cookie。 

10.2.3 变量 

JavaScript 中 声明 的 变量 都 是 弱 类 型 变量 ， 在 声明 变量 的 时 候 可 以 不 考虑 变量 的 类 型 ， 直 
接 以 var 开 头 声明 即 可 。 在 具体 使 用 的 时 候 ， 可 以 根据 变量 赋值 的 情况 判断 变量 的 类 型 。 

如 果 将 变量 在 函数 体内 部 声明 ， 就 称 为 局 部 变量 ， 如 果 在 函数 体外 部 声明 ， 就 称 为 全 局 
变量 。 声 明 变 量 的 时 候 ， 在 同一 个 HTML 页 面 中 ， 尽 量 使 用 不 同 的 变量 名 。 在 声明 变量 的 同 
时 ， 还 可 以 给 变量 赋值 。 如 果 变 量 的 值 是 字符 串 ， 则 需要 使 用 引号 将 值 扩 起 来 ，JavaScript 中 
不 区 分 单 引号 和 双 引 号 。 例 如 下 面 这 段 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>10.2</title> 

<script> 

Var number; 

var count=10; 

var price=10.45; 

Var fromModel=’ orm.Sean’ ; 

Var recList=new Object(); 

/SeripE> 

</head> 

<body> 

</body> 

在 这 段 代 码 中 ， 变 量 number 只 声明 了 却 没有 El 变量 count 声 明 的 同时 赋值 了 一 个 整 
数 ， 变 量 price 声 明 的 同时 赋值 了 一 个 浮 点 量 ffromModel 声 明 的 同时 赋值 了 一 个 字符 

， 并 且 字 符 串 用 单 引 号 括 起 来 ， 变 量 recList 声 ea erg 
10.2.4 函数 
JavaScript 中 用 function 声 明 函 数 ， 函 数 体 必 须 写 在 大 括号 里 面 ，JavaScript 声 明 函 数 的 语 
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法 如 下 : 
function 函数 名 (varl, var2... ){ 
代码 块 ... 
其 中 函数 名 定义 。 但 是 要 注意 的 是 ， 因 为 在 JavaScript 中 区 分 大 小 写 ， 所 以 无 论 
是 声明 函数 还 是 调 函数 名 的 大 小 写 都 必须 一 致 。 小 括号 中 的 var1 和 var2 表 示 函 数 的 



































参数 ， 如 果 函 数 不 需 要 参数 ， 也 可 以 不 写 参 数 ， 但 是 小 括号 不 能 省 略 。 
例如 下 面 这 段 代 码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="uUtf£f-=8"> 

<title>10.2</title> 

<script language="javascript"> 

function replaceUr]l (strUT1) 1{ 

document .getElementById ("location") .href=strUrl; 

于 

SR 

</head> 

<body> 

<a href="#" id="location" onMouseOver="replaceUrl('http://www.baidu. 
com' ) "> 改变 超 链 接地 址 </a> 

</body> 

</html> 


在 这 段 代码 中 声明 了 一 个 名 为 replaceUrl 的 函数 ， 该 函数 有 一 个 名 为 strURL 的 参数 ， 通 过 
<a> 元 素 的 id 获 取 超 链接 对 象 ， 并 将 参数 赋值 给 超 链接 对 象 的 href 属 性 。 同 时 为 超 链接 设置 当 
鼠标 移动 到 超 链接 上 时 执行 该 函数 。 运 行 这 段 代 码 ， 将 鼠标 移动 到 超 链接 上 时 ， 在 浏览 器 窗 
的 左下 角 会 显示 出 超 链接 的 链接 地 址 ， 效 果 如 图 10.2 所 示 。 
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图 10.2 
































案例 中 调用 JavaScript 函 数 的 方式 ， 是 在 HIML 元 素 的 事件 回调 中 执行 函数 ， 如 果 要 在 
HIMLI 页 面 加 载 的 时 候 执行 该 函数 ， 可 以 使 用 以 下 代码 ; 


<body onload=" replaceUr1 ('http://www.baidu.com')" > 
另外 还 可 以 直接 在 超 链接 中 执行 调用 函数 的 命令 ， 相 关 代码 如 下 : 


<a href="javascript: replaceUrl ('www.baidu.com')"” > 跳 转 页 面 </a> 
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后 还 可 以 直接 在 JavaScript 中 执行 函数 调 





















































， 这 种 方法 将 在 浏览 器 解析 JavaScript 代 码 的 























时 候 执行 函数 调用 ， 相 关 代码 如 下 : 
<script> 
replaceUr] ("www.baidu.com"); 
</script> 
10.25 .类 
需要 明确 的 一 点 是 ， 在 JavaScript 语 法 中 并 不 支持 类 ， 但 是 为 了 完成 某 些 复杂 代码 的 编 
写 ， 程 序 员 们 经 过 不 懈 的 努力 ， 研 究 出 了 如 何 用 JavaScript 模 拟 类 。 在 JavaScript 中 ， 可 以 
function 关 键 字 来 模拟 创建 一 个 类 ， 例 如 下 面 这 段 代码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>10.3</title> 
<script> 
function MenuItem(1, h, t) 
{ 
this.label = 1; 
this.href = h; 
this.target = t; 
this.toHtml = function() 
{ 
Var html = "<a href='" + this.href + "™' "; 
if(this.target != null){ 
html += (" target='" + this.target + "™' "); 


} 


html += " >" + this.label + "</a>"; 


return html; 
} 














































































































</script> 

</head> 

<body> 

</body> 

</html> 

在 这 段 代码 中 使 用 JavaScript 定 义 了 一 个 名 为 MenuItem 的 类 ， 类 中 使 用 this 关 键 字 表示 入 
例 的 对 象 ，label、href、target 和 htoHtml 都 表示 类 中 的 属性 ， 其 中 属性 toHtml 又 是 另 一 个 函数 的 
返回 值 ， 在 这 个 函数 中 使 用 retum 返 回 了 一 个 值 。 这 样 定义 一 个 JavaScript 类 后 ， 在 使 用 的 时 


候 可 以 























这 个 类 : 





以 下 代码 代 














var item = new MenuItem(" 百 度 ", "http://www.baidu.com", null); 


10.2.6 Object 类 


个 类 的 时 候 











在 JavaScript 中 ， 我 们 还 可 以 使 
































H 











为 其 添加 成 员 变量 ， 例 








如 下 














这 段 代码 : 


Object 关键 字 来 创建 一 个 没有 任何 结构 的 类 ， 在 使 
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function createObject(){ 
Var obj=new Object(); 
obj .name="objTest"; 
obj .number=10; 
return obj; 

，， 


在 这 段 代 码 中 ， 我 们 首先 使 用 了 new 关 键 字 创 建 了 一 个 Object 对 象 ， 然 后 为 新 创建 的 对 象 









































添加 了 name 和 number 两 个 变量 ， 并 为 其 赋值 ， 最 后 返回 了 这 个 对 象 。 这 就 是 使 用 Object 来 创 


























10.2.7 数组 





























在 JavaScript 中 还 可 以 使 用 Array 关 键 字 来 创建 一 个 数组 ， 然 后 通过 push 方 法 为 数组 添加 数 





据 ， 例 如 下 面 这 段 代 码 : 

















<script> 

Var array=new Array(); 

forl(var i=0;i<6;i++) 
array.push (i); 

} 

</SeripE> 


在 这 段 代 码 中 ， 我 们 使 用 Array 关 键 字 创建 了 一 个 名 为 array 的 数组 ， 然 后 通过 for 循 环 ， 






































向 这 个 数组 中 依次 添加 了 6 个 数据 。 在 使 用 数组 的 时 候 ， 我 们 可 以 使 用 数组 变量 名 称 加 方 括 
号 ， 插 号 中 带 索 引 的 方式 来 使 用 数组 中 的 数据 ， 相 关 代 码 如 下 : 






































Var msg=""; 

forl(var i=0;i<array.length;i++){ 
msg+="item:"+array[i]+'<br>"'; 

3 

document .writeln (msg) 


在 这 段 代码 中 ， 我 们 先 定义 了 一 个 字符 串 变量 ， 然 后 通过 for 循 环 ， 依 次 将 array 数 组 中 的 

















数据 添加 到 msg 变 量 中 ， 并 且 对 每 个 变量 的 数据 进行 二 次 处 理 ， 最 后 将 msg 数 据 展示 在 页 面 


十 














h。 如 图 10.3 所 示 为 输出 数组 的 效果 。 
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10.3 使 用 JavaScript 事 件 


定义 了 JavaScript 函 数 ， 如 果 没 有 JavaScript 事 件 进行 驱动 ， 这 些 函数 仍然 不 能 执行 。 那 么 
么 是 JavaScript 事 件 呢 ?” 当 我 们 刷新 Web 页 面 的 时 候 ，Web 页 面 会 触发 onLoad 事 件 ， 当 我 们 
击 页 面 上 的 按钮 的 时 候 会 触发 onClick 事 件 ， 当 我 们 把 鼠标 移动 到 某 个 控件 上 面 的 时 候 ， 会 
发 onMouseOver 事 件 。 在 Web 页 面 上 所 有 的 这 些 动作 ， 都 会 触发 相应 的 事件 。JavaScript 中 
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常用 的 事件 如 下 表 所 示 : 
表 10.1 
属性 描述 
onClick 鼠标 单 击 事 
onMouseOver 鼠标 经 过 事件 
onMouseOut 鼠标 移出 事 
onChange 文本 框 内 容 改 变 事 件 
onSelect 文本 框 内 容 被 选中 事件 
onFocus 获取 焦点 事件 
onBlur 失去 焦点 事件 
onLoad 页 面 加 载 事 件 
onUnload 关闭 页 面 事 件 
例如 下 面 这 段 代码 : 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>10.4</title> 
<script language="javascript"> 
function init(){ 
document .getElementById ("msg") .innerHTML=" 请 在 文本 框 中 输入 信息 。"; 
让 
function mouseOver (){ 
document .getElementById ("msg") .innerHTML=" 点 击 按钮 后 ， 文 本 框 中 的 信息 将 显示 在 这 
里 。™; 
FE 
function textChange () { 
document .getElementById ("msg") .innerHTML=document .getElementById ("txt"). 
value; 


时 

function onclick()1{ 

document .getElementById ("msg") .innerHTML=document .getElementById ("txt"). 
lue; 
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</script> 

</head> 

<body onLoad="init()"> 

<h2>Javascript 测 试 </h2> 

请 输入 : 

<input type="text" id="txt" onChange="textChange()" 
onMouseMove="mouseOver ()" /> 

<input id="btn" type="button" value=" 按 钮 " onClick="onclick()"/> 

<br> 

<h2 id="msg"></h2> 

</body> 

</html> 


在 这 段 代 码 中 ， 总 共有 4 个 函数 ， 函 数 init 用 于 当 页 面 加 载 的 时 候 显示 提示 信息 ; 函数 
ImouseOver 用 于 当 鼠 标 经 过 文本 框 时 显示 提示 信息 ;函数 textChange 用 于 当 文 本 框 中 的 内 容 发 
生 改 变 时 ， 将 改变 后 的 内 容 显示 在 提示 信息 中 ;， 函数 onclick 用 于 当 点 击 按钮 的 时 候 ， 将 文本 
框 中 的 信息 显示 在 提示 信息 中 。 这 4 个 函数 分 别 在 <body> 元 素 的 onLoad 事 件 、<input> 元 素 的 
onChange 事 件 、onMouseMove 和 onClick 事 件 中 调用 。 页 面 加 载 时 的 效果 如 图 10.4 所 示 。 当 鼠 
标 移动 到 文本 框 时 的 效果 如 图 10.5 所 示 。 在 文本 框 中 输入 文字 ， 点 击 按钮 后 的 效果 如 图 10.6 
所 示 。 
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交互 式 


网 页 








我 们 通常 将 浏览 器 称 为 Web 前 端 ， 将 Web 服 务 器 称 为 后 端 ， 用 户 在 前 端的 操作 ， 在 后 端 


会 有 对 应 的 程序 进行 处 理 。 这 样 ， 一 个 过 程 就 形成 了 前 后 端的 一 次 交互 。 然 而 在 实际 应 
中 ， 有 很 多 情况 并 不 需要 后 端 做 出 判断 ， 直 接 在 前 端 就 可 以 完成 判断 ， 比 如 用 户 输入 的 电子 
b 件 地 址 是 否 有 效 等 。 下 面 我 们 介绍 浏览 器 前 端 交互 的 相关 内 容 。 



























































11.1 常用 JavaScript 特 效 











JavaScript 虽 然 是 一 些 代码 段 ， 但 是 经 过 这 么 多 年 的 发 展 和 积累 ， 已 经 具有 了 很 多 独特 的 

















功能 ， 使 用 这 些 功能 就 可 以 完成 一 些 特殊 的 效果 。 


11.1.1 时 间 日 期 特效 























在 JavaScript 中 使 





以 及 时 针 、 分 针 、 秒 针 、 



































Date 关 键 字 创建 日 期 对 象 ， 
星期 几 、 日 期 、 月 份 和 生 





























时 间 日 期 特效 。 例 如 下 




















<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title>11.1</title> 


</head> 
<body> 


<script language="javascript"> 
function getDayCN (day){ 


Var value=""; 
Switch (day){ 


case 1: 
value=" 星 期 一 "; 
break; 

case 2: 
value=" 星 期 二 "; 


break; 








通过 日 期 对 象 就 可 以 获取 当前 系统 时 间 ， 
FE 份 。 有 了 这 些 对 象 ， 我 们 就 可 以 创建 各 种 
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cease 3: 
value=" 星 期 三 " 
break; 
case 4: 
value=" 星 期 
break; 
Case Ss 
value=" 星 期 五 " 
break; 
case 6: 


value=" 星 期 六 "; 


break; 
case 7: 
value=" 星 期 
break; 
default: 
value=""; 
break; 

} 

return value; 
3 

var dateObj=n 
Var msg="<h2> 
msg+="<b>"; 
msg+=dateObj 
msg+=dateob] 
msg+=dateObj 
msg+=dateObj 
msg+=dateObj 
msg+=dateObj 
msg+=dateObj 
msg+=" 
msg+="</b>" 
document .writ 
</script> 
</body> 
</html> 





在 这 段 代 码 中 ，JavaScript 函 数 getDayCN 通 过 传 进来 的 参数 返 
创建 了 一 个 dateObject 对 象 ， 然 后 根据 这 个 对 象 分 别 获取 年 、 月 、 
月 份 的 索引 从 0 开始 ， 
览 器 都 是 以 1900 年 为 起 始 年 ， 
在 正中 ，dateObj.getYear() 将 直接 获 








期 。 需 要 注意 的 是 ， 
准 浏 览 

















ew Date(); 


当前 时 间 </h2>"; 


eln (msg); 





























.getUTCFullYear ()+" 年 "; 
.getMonth()+1+" 月 "; 
.getDate () +" 日 "7 
.getHours () +" 时 "7 
.getMinutes () +" 分 "7 
.getSeconds () +" 秒 "; 
.getMilliseconds ()+" 毫 秒 "; 
"+getDayCN (dateObj .getDay() ) ; 
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期 ,使 








Date 关 键 字 











、 时 、 分 、 秒 、 毫 秒 和 星 




















因此 返回 正确 的 月 份 需要 











加 上 dateObj.getYear() 获 取 的 年 
芭 当 前 的 年 份 。 




















在 下 面 这 段 代码 中 ， 通 过 JavaScript 
<!doctype html> 

<html> 

<head> 

<meta charset="utf=8"> 
<titieSlli.2</tiCLe> 


的 时 间 函 数 创建 了 一 个 于 


六 


加 1。 








对 于 年 来 说 ， 标 
份 ， 就 是 当前 





的 年 份 ; 而 





态 的 时 间 效 果 。 
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</head> 

<style type="text/css"> 
#showtime { 

margin:0 auto; 
background:#5C1RA1C7 
height: 30px; 
vertical-align:middle; 
line-height: 30px; 
width: 220px; 

border: 2px #CB4F51 solid; 
， 

#localtime 1{ 
color:white; 
font-size:18px; 
font-weight:bold; 

. 

</style> 

<body> 
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<div id="showtime"> <span id="localtime"></span> </div> 


<script language="javascript"> 
function showLocale (objD) { 
var str; 

var hh = objD.getHours (); 

Var mm = objD.getMinutes (); 
Var ss objD.getSeconds (); 
Var month = objD.getMonth()+1; 








var date = objD.getDate(); 
if (hh<10)hh=’ 0’ +hh; 
if (mm<10)mm=’ 0’ +mm; 
if(ss<10)ss=’ 0’ +ss; 


if (month<10)month=’ 0’ +month; 
Eldate<liOndate = 50 9 dates 
Var year = objD.getFullYear(); 
str=year+" 年 "; 
str+=month+" 月 "+date+" 日 "; 
strt= he pm 

return (str); 

!; 

function tick() { 

var today; 

today=new Date(); 


document .getElementById("localtime") .innerHTML=showLocale (today); 


$F 

window.setInterval ("tick()",1000); 
</script> 

</body> 

</html> 


运行 这 段 代码 后 ， 效 果 如 


一 次 。 








败 














11.1 所 示 。 这 个 时 间 与 当前 系统 时 间 保 持 一 致 ， 并 且 每 秒 钟 
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11.1.2 页 面 特效 


























JavaScript 还 可 以 用 来 控制 很 多 页 面 特 效 ， 比 如 进度 条 效果 、 导 航 菜 半 
航 效果 等 。 下 面 我 们 就 来 看 一 个 进度 条 的 效果 ， 相 关 代 码 如 下 : 
























































<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>11.3</title> 

<style> 

#loading{ 

color:#0066ff; 

Size:2; 

face="Arial"; 

#chartt{ 

font-family:Arial; 

font-weight:bold; 

color:#0066ff; 

background-color:#fef4d9; 

padding:0px; 

border-style:none; 

有 

#percent{ 

Color:#0066ff; 

text-align:center; 

border-width:medium; 

border-style:none; 

} 

</style> 

</head> 

<body> 

<form name=loading> 
<p align=center id="loading"> 载 入 中 ， 请 稍 等 . . .<br> 








效果 、 随 机 显示 导 





<input type=text id="chart" name=chart size=46 readonly ><br> 
<input type=text id="percent" name=percent size=47 readonly > 


<script> 

Var bar=0 

Var line="] | 
Var amount=" | | 
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count () 

function count(){ 

bar=bar+2 

amount =amount + line 

document .loading.chart .value=amount 
document .loading.percent .value=bar+"g" 
if (bar<99) 
{setTimeout ("count ()",100);} 

else 

{window.location = "#";} 

}</script> 

</p> 

</form> 

</body> 

</html> 


在 这 段 代 码 中 有 1 个 form 表 单 ， 表 单 中 的 <p> 标 签 中 内 嵌 了 两 个 <input> 标 签 ， 第 1 个 
<input> 标 签 用 于 显示 进度 条 状态 ， 第 2 个 <input> 标 签 用 于 显示 进度 的 百分比 。 函 数 count 用 于 
计算 当前 进度 条 的 进度 和 状态 ， 每 100 毫 米 计 算 一 次 ， 如 果 进 度 条 没有 达到 100， 则 继续 为 第 
个 <inpu 亿 标签 中 添加 竖 线 ， 同 时 更 改 百 分 比 ， 否 则 跳 转 到 新 的 地 址 。 运 行 这 段 代 码 后 ， 页 
效果 如 图 11.2 所 示 。 



















































































Per 














王 
































3 
€ 3 © Ofile///Ciampp/htdocs/11/113htmle 
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载 入 中 ， 请 稍 等 … 
LT 

















11.1.3 图 形 图 像 特 效 


使 用 JavaScript 还 可 以 控制 图 像 的 一 些 特效 ， 例 如 鼠标 点 击 的 效果 、 图 像 循环 显示 的 效 
果 、 图 像 渐 渐 出 现 的 效果 、 图 像 变 形 扭曲 的 效果 等 。 下 面 我 们 就 来 看 一 个 图 形变 形 扭曲 的 效 
果 ， 相 关 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>11.4</title> 

</head> 

<body onLoad="fade () "> 

<img src="img/img01.jpg" name="u" > 
<script language="Javascript"> 
vArib = 1 

Var c= trues 

function fade(){ 

if(document .all); 



























































加 | 
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ifile == Erua) UN 
bts 


if(b==100) { 
B= 
c= false 


if(b==10) { 
Drs 
全 


if(c == false) { 
b=—=; 





u.width=150 + b; 
u.height=125 - b; 
setTimeout ("fade ()",50); 
和 

</body> 

</html> 











在 这 段 代码 中 ，HTML 页 面 中 只 有 一 个 图 像 标 签 ， 用 于 



































显示 一 幅 图 像 。 





而 在 JavaScript 代 














码 中 ， 每 50 毫 秒 就 会 执行 一 次 fade 函 数 ， 这 个 函数 的 主要 功能 就 是 不 断 变换 图 像 的 长 和 宽 。 














图 像 的 初始 尺寸 设置 长 度 为 150、 高 度 为 125， 通 过 一 个 变量 















































100， 就 开始 减 小 5，， 并 将 其 设置 到 图 像 的 尺寸 上 ， 如 果 b 等 




















到 图 像 的 尺寸 上 。 运 行 这 段 代码 后 ， 效 果 如 图 11.3 所 示 ， 图 


























定 程度 后 又 开始 逐渐 增 大 。 
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11.1.4 页 面 导航 特效 























b 来 控制 图 像 的 尺寸 ， 如 果 b 竺 
10， 就 开始 增 大 b， 并 将 其 设置 











像 的 长 和 宽 逐 渐 缩小 ， 缩 小 到 一 





使 用 JavaScript 控 制 页 面 导航 特效 的 案例 也 有 很 多 ， 比 如 多 级 滚动 的 菜 壬 























Ep、 可 移动 的 显示 





























展 、 无 边框 的 广告 窗口 、 可 拖 动 的 菜单 等 。 下 面 我 们 来 看 
导航 效果 ， 相 关 代 码 如 下 所 示 : 
<!doctype html> 


<html> 
<head> 





























个 通过 下 拉 莱 





打开 页 面 链 接 的 











第 11 章 使 用 JavaScript 创 建交 互 式 网 页 





<meta charset="utf-=8"> 

<title>11.5</title> 

</head> 

<body> 

<script language="javascript"> 

function gothere(){ 

Var thebox=document .mycombowopt 

if (thebox.windowoption.checked){ 

IE (!window.newwindow) 

newwindow=window.open("") 

newwindow.location=thebox.example.options [thebox.example.selectedIndex] . 
Value 

else 

location=thebox.example.options[thebox.example.selectedIndex] .value 

4 

STR 

<form name="mycombowopt"> 

<select name="example" size=1> 

<option value="http://www.163.com"> 网 易 </option> 

<option value="http://www.sohu.com"> 搜 狐 </option> 

<option value="http://www.sina.com.cn"> 新 浪 </option> 

<option value="http://www.baidu.com"> 百 度 </option> 

<option value="http://cn.bing.com/">Bing</option> 

</select> <input type="button" value="Go!" onClick="gothere()"> <br> 

<input type="checkbox" name="windowoption" value="ON"> 新 窗 访问 </p> 

</form> 

</body> 

</html> 


在 这 段 代码 中 有 一 个 form 表 单 ， 表 单 中 内 嵌 了 一 个 下 拉 选 择 杠 、 一 个 <input> 按 钮 和 复 选 
框 。 当 点 击 按钮 的 时 候 ， 执 行 gothere 函 数 ， 该 函数 用 于 跳 转 到 当前 选中 项 对 应 的 链接 地 址 ; 
如 果 同 时 勾 选 了 复 选 框 ， 则 在 新 窗口 中 打开 选中 项 对 应 的 链接 地 址 。 运 行 这 段 代码 后 ， 选 择 
一 个 下 拉 选 项 ， 点 击 按钮 后 即 可 导航 到 新 的 页 面 。 效 果 如 图 11.4 所 示 。 



















































































DiLs 


© [file///C:/xampp/htdocs/11/11.5.html 
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网 易 “| | Gol 


新 窗 访问 

















11.1.5 文本 特效 
使 用 JavaSeript 控 制 文本 的 特效 也 有 很 多 种 ， 例 如 文本 自动 输出 、 文 字 扭 动 播放 、 多 条 
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文字 播放 特效 、 字 符 从 右 波浪 式 出 现 然后 下 落 等 效果 。 


效 ， 相 关 代码 如 下 : 


<!dqoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>11.6</title> 

<script language="JavaScript"> 
Var a = Math.random() + "" 

Var randl = a.charAt (5) 


quotes 
quotes[1 
quotes 
quotes 
quotes 
quotes 
quotes 
quotes 
quotes 
quotes 
quotes[0 
var quote 


CC 




















= new Array 


' 这 是 一 个 很 长 的 文本 信息 ' 

"这 也 许 是 你 见 过 的 最 无 聊 的 信息 了 " 
1 了 哈哈: 

"真是 个 不 错 的 选择 ' 

' 这 是 谁 的 注意 ' 

' 明 天 早上 来 我 办 公 室 ' 

"夕阳 西 下 ' 

' 这 是 一 个 互联 网 的 时 代 ' 

1 针灸 " 

"明天 早上 的 太阳 " 


quotes [randl1] 


document .write( quote ) 
</script> 
</head> 
<body> 
</body> 
</html> 


这 上段 代码 用 




















下 


重 我 们 来 看 一 个 随机 显示 信息 的 特 














FJavaScript 中 创建 了 一 个 数组 ， 并 且 给 数组 中 添加 了 很 多 数据 ， 然 后 通过 一 个 














Iandom 随 机 数 获取 到 一 个 索引 数 ， 并 将 数组 中 位 于 这 个 索引 的 数据 显示 在 页 面 上 。 运 行 这 段 














代码 后 ， 宇 





E 复 刷新 页 面 会 得 到 不 同 的 

















116 
所 © D file///C:/xampp/htdocs/11/11.6.html 


湾 应 用 “ 门 dreamweaver cc 2.， 门 HTML 


这 是 一 个 很 长 的 文本 信息 














11.1.6 鼠标 特效 


使 


鼠标 左 键 、 鼠 标点 击 效果 、 三 色 鼠 标 等 。 下 面 我 们 来 看 




















JavaScript 





效果 ， 如 图 11.5 所 示 。 























控制 鼠标 特效 的 用 法 很 多 ， 比 如 跟随 鼠标 的 花絮 、 各 种 形状 的 鼠标 、 禁 目 




















个 显示 鼠标 坐标 的 特效 ， 相 关 代 码 
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如 下 : 


<!ldoctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>11.7</title> 
</head> 





<p id="y"></p> 
</div> 
<script type="text/javascript"> 
Var Xr YS 
function positionBody (event){ 
event = event||window.event; 
x=event .clientx 
y=event .clientY 
} 
document .onmousemove = function(event){ 
positionBody (event); 
document .getElementById ("x") .innerHTML = "x= " + xX + "px"; 
document .getElementById("y") .innerHTML = "y= " + y + "px"; 
. 














</script> 

</body> 

</html> 

在 这 段 代 码 中 ， 页 面 只 有 两 个 <p> 标 签 ， 分 别 用 于 记录 当前 鼠标 的 x 和 y 坐 标 。 当 鼠标 移 


























动 的 时 候 执行 函数 ， 通 过 positionBody 函 数 获取 当前 鼠标 相对 于 body 定 位 的 x 和 y 坐 标 ， 然 后 赋 
值 给 <p> 标 签 ， 运 行 这 段 代码 后 ， 效 果 如 图 11.6 所 示 。 











和 3 C Dfile///Cxampp/htdocs/11/11.7 html 
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= 236px 


y= 36px 




















1 全 2 防止 访客 刷新 内 容 



































当 用 户 提 交 表 单数 据 之 后 ， 如 果 再 次 刷新 页 面 ， 有 可 能 次 提交 数据 的 情况 。 为 了 


EE 
vcH 
站 
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多 ， 下 面 我 们 就 来 介绍 一 下 如 何 使 用 JavaScript 防 止 用 户 刷 新 页 面 。 























11.2.1 禁用 F5 刷 新 






































从 而 禁用 F5 刷 新 功能 。 相 关 代码 如 下 ;: 


<script language="javascript"> 
document .onkeydown=function(){ 
if ( event.keyCode==116){ 
event .keycode = 0; 

event .cancelBubble = true; 
return false; 

F 

. 

</script> 






















































































11.2.2 禁止 右键 弹出 菜单 


























当 页 面 触发 onkeydown 事 件 的 时 候 ， 可 以 通过 获取 当前 键盘 按钮 来 控制 禁 


























避免 这 类 事情 的 发 生 ， 在 编写 程序 的 时 候 需 要 做 一 些 特 殊 处 理 。 针 对 这 类 情况 的 处 理 方案 很 


F5 功 能 键 ， 


在 这 段 代码 中 ， 使 用 event.keyCode 获 取 按 下 按键 的 ACSII 码 ，F5 的 ACSII 码 是 116， 如 果 
键盘 上 按 下 的 是 F5 键 ， 那 么 设置 event.keyCode=0， 并 返回 一 个 false， 这 样 就 可 以 禁止 F5 的 刷 
新 功能 了 。 将 这 段 代码 应 用 到 页 面 中 ， 按 下 F5 功 能 键 将 没有 任何 反应 。 




















在 页 面 上 鼠标 右键 ， 也 可 以 看 到 一 个 刷新 功能 ， 为 了 防止 



































们 可 以 通过 禁止 右键 弹出 菜单 的 方法 禁止 刷新 功能 。 相 关 代码 如 下 : 


<script language="jJavascript"> 

document .oncontextmenu=function(){ 
return false; 

上 

</script> 


将 这 段 代 码 添加 到 页 面 中 ， 当 在 页 面 上 和 
































起 
二 











11.2.3 屏蔽 其 他 功能 


使 用 JavaScript 还 可 以 在 页 
JavaScript 屏 蔽 的 功能 。 
屏蔽 F1 功 能 键 的 帮助 功能 可 以 使 用 下 面 的 代码 ; 
window.onhelp=function(){ 
return false 
屏蔽 Altt 方 向 键 的 功能 可 以 使 用 下 面 的 代码 : 


document .onkeydown=function(){ 





























到 
如 
Ee 








项 很 多 其 他 的 功能 ， 这 里 我 们 
















































































鼠标 右键 的 时 候 ， 右 键 菜 让 








户 从 这 里 刷新 页 面 ， 我 
将 不 会 弹出 。 
介绍 一 些 比较 有 用 的 使 
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if ((window.event.altKey) && ((window.event.keyCode==37)|| (window.event. 


keyCode==39))) { 
alert ("禁用 ALT+ 方 向 键 前 进 或 后 退 网 页 ! ") 
event.returnValue=false; 
时 














ACSII 为 37 表 示 向 左 的 的 方向 键 ，ACSII 为 39 表 示 向 右 的 方向 键 。 如 果 在 页 











面 上 使 用 退 格 





























删除 键 也 可 以 达到 页 面 返回 的 效果 ， 退 格 删除 键 的 ACSII 为 8， 使 用 下 面 的 代码 
退 格 删除 键 功能 。 


document .onkeydown=function(){ 
if (window.event.keyCode==8) { 
alert ("禁用 退 格 删除 键 ! ") ; 

event .returnValue=false; 

. 

: 



































Fl11 功 能 键 可 以 让 浏览 器 全 屏 显 示 ， 其 对 应 的 ACSII 码 是 122; Ctrltn 组 合 键 可 以 新 打开 
，F4 功 能 键 的 











个 浏览 器 窗口 ，n 的 ACSII 码 为 78; Alt+F4 组 合 键 可 以 关闭 当前 打开 的 窗 
































样 可 以 屏蔽 


ol 








了 15， 其 他 键盘 上 的 按钮 对 应 的 ACSII 码 可 以 查看 ACSI 对 照 表 ， 使 
JavaScript 方 法 屏蔽 相关 功能 。 





113 使 用 Query 





JavaScript 对 于 改善 网 页 效果 起 到 了 很 大 的 帮助 ， 但 是 我 们 在 编写 程序 的 时 候 ， 经 常会 因 














以 上 介绍 的 




















为 编写 很 多 重复 的 代码 块 ， 让 整个 文件 变 得 爱 肿 ， 运 行 变 得 缓慢 ， 而 且 还 会 出 现 很 多 错误 。 











为 了 改善 这 种 状况 ， 可 以 使 用 jQuery 帮助 我 们 优化 代码 。 














11.3.1 什么 是 jQuery 











jQuery 是 一 个 兼容 多 浏览 器 的 JavaScript 函 数 库 ， 使 用 jQuery 编写 的 代码 不 但 精简 而 且 功 
能 更 强 。jQuery 函 数 库 包含 HTML 元 素 的 选取 和 操作 、CSS 操 作 、HTML 事 件 函 数 、JavaScript 
特效 和 动画 、HTML DOM 遍 历 和 修改 、AJAX 和 Utilities， 它 是 一 个 辅助 JavaScript 开 发 的 非常 




















有 用 的 函数 库 。 


















































下 面 这 名 代码: 





Var obj=document .getElementById ("note") 7 


如 果 我 们 使 用 jQuery 获取 这 个 对 象 ， 就 非常 方便 了 ， 代 码 如 下 : 























例如 ， 页 面 中 有 一 个 id 为 note 的 元 素 ， 如 果 使 用 JavaScript 获 取 这 个 对 象 ， 我 们 应 该 使 
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Var obj=$ ("p"); 


11.3.2 如 何 应 用 jQuery 








jQuery 是 一 个 JavaScript 函 数 库 ， 在 使 





团 
如 

















jQuery 之 前 ， 需 要 在 页 











库 ， 比 如 谷歌 和 微软 的 服务 器 上 都 有 jQuery， 它 们 的 引入 方法 如 下 。 
从 谷歌 引入 jQuery 的 方法 如 下 所 示 : 


Ph 引入 JavaScript 函 数 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min. 


js"></script> 





从 微软 引入 jQuery 的 方法 如 下 所 示 : 


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></ 


script> 


另外 ， 我 们 还 可 以 直接 从 jQuery 官网 (http:/jquery.com/download/) 上 下 载 最 新 的 jQuery 


库 ， 然 后 将 jQuery 库 和 我 们 的 HIML 文 件 放 在 一 起 ， 这 样 就 可 以 直接 在 HIMLI 页 



































中 引 























了 。 














引入 jQuery 之 后 ， 我 们 可 以 使 
行 相关 的 操作 ， 例 如 下 面 这 段 代码 ; 


<!doctype html> 




















<html> 

<head> 

<meta charset="utf=8"> 
<title>11.9</title> 























$ 符 号 ， 配 合 HTML 元 素 选取 页 面 中 的 特定 元 素 ， 然 后 执 


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></ 


script> 


<script language="javascript"> 


function hideTitle()f{ 
$("#title") .hide(); 

了 

function hideP(){ 
$(".p") .hide(); 

} 

function hidespan(){ 

$ ("span") .hide(); 

} 

</acript> 

</head> 

<body> 

<h2 id="title"> 标 题 </h2> 
<p class="p"> 这 是 段落 </p> 
<span> 这 是 内 容 </span><br> 


<input type="button" value=" 隐 藏 标题 " onClick="hideTitle()"/> 
<input type="button"” value=" 隐 藏 段落 " onclick="hideP()"/> 
<input type="button" value=" 隐 藏 内 容 " onclick="hidespan()"/> 


</body> 
</html> 








200 


<p> 元 素 设置 了 class 属 性 ，<s 





二 





在 这 段 代 码 中 ， 





HIML 页 面 




















隐藏 对 应 的 HTML 元 素 。 在 hideTitle 函 数 中 使 用 id 属性 获取 HTML 元素 ， 并 将 其 
hideP 函 数 中 使 用 class 属 性 获取 HTML 元 素 ， 并 将 其 隐藏 在 hideSpan 函 数 中 直接 使 


元 素 标记 获取 HIML 元 素 ， 寺 
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h 有 <h2>、<p> 和 <span> 这 些 元 素 ，<h2> 元 素 设置 了 id 属 性 ， 


pan> 元 素 没有 设置 人 有 

















E 何 属性 。 这 些 元 素 下 面 


有 3 个 按钮 ， 分 别 
























































f 将 





其 隐藏 。 


































































































隐藏 在 
HIML 





























FE 常 方 便 ， 而 且 jQuery 的 功能 远 远 不 止 这 么 






































方法 ， 有 关 jQuery 更 多 的 操作 ， 可 以 






























































优雅 、 灵 活 和 可 扩展 的 


使 用 jQuery 之 后 ， 我 们 获取 对 象 的 方法 仍然 
简单 。 由 于 篇 幅 的 关系 ， 这 里 仅 介 绍 jQuery 简 单 的 使 
查询 相关 资料 。 

11.4 使 用 bootstrap 
一 一 

jQuery 是 一 个 非常 经 典 的 辅助 JavaScript 开 发 的 函数 库 ， 但 是 一 些 不 甘 乎 庸 的 工程 师 为 了 
提高 他 们 内 部 的 分 析 和 管理 能 力 ， 仍 然 用 业余 时 间 构 建 了 一 套 易 用 、 
前 端 工具 集 ， 这 就 是 bootstrap， 并 且 越 来 越 多 的 工程 师 为 其 共享 了 高 质量 的 代码 和 文档 。 
11.4.1 什么 是 bootstrap 

bootstrap 最 早 是 由 一 些 twitter 工 程 师 构建 的 ， 其 目的 在 于 提高 
































也 们 内 部 的 分 析 和 管理 能 











力 ， 


后 来 开源 








后 ， 越 来 越 多 的 了 
档 。 同 时 还 涌现 了 许多 基于 





Fbootstrap 建 设 的 








[ 程 师 加 入 了 bootstrap 大 军 ， 为 




















贡献 高 质量 的 代码 和 文 








站 ， 这 些 网 站 不 仅 界 





利落 大 方 ， 例 如 图 11.7 和 图 11.8 所 示 的 两 个 网 站 。 














Kp ie uning do + 
© |@ https//ipptcom 


kippt 


Kippt is shutting down 























清新 、 简 洁 ， 而 且 排版 
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eetio- Modern fleet x 





€ 3 X https/Wwwfeetiocom 三 字 王 


Master 
Your Fleet 


Ea 





图 11.8 




















前 所 有 的 主流 浏览 器 都 支持 bootstrap， 它 的 框架 包含 了 贯穿 于 整个 库 的 移动 设备 优先 
的 样式 。 只 要 具备 HIML 和 CSS 的 基础 知识 ， 就 可 以 开始 学 习 bootstrap ， 而 且 bootstrap 的 响应 
式 CSS 能 够 自 适应 于 台式 机 、 平 板 电脑 和 手机 。 

开源 项 目的 bootstrap， 为 开发 人 员 提供 了 一 个 简洁 统一 的 解决 方案 ， 而 且 它 还 包含 
了 功能 强大 的 内 置 组 件 ， 易 于 定制 。 








































































































11.4.2 如 何 应 用 bootstrap 


























bootstrap 的 使 用 方法 和 jQuery 类 似 ， 需 要 在 HTML 页 面 中 引入 bootstrap 资 源 ， 推 荐 使 用 百 
度 的 静态 资源 和 CDN 服 务 ， 这 样 访问 速度 更 快 、 加 速效 果 更 明显 、 没 有 速度 和 带宽 限制 。 首 
先 需 要 引入 bootstrap 核 心 的 CSS 文 件 ， 相 关 代码 如 下 : 


<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min. 
css" rel="stylesheet"> 


引入 可 选 的 bootstrap 主 题 文件 ， 相 关 代码 如 下 : 


<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap- 
theme.min.css"></script> 


引入 jQuery 文件 ， 注 意 必须 在 bootstrap.minjs 之 前 引入 ， 相 关 代 码 如 下 : 


<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></ 
script> 


最 后 引入 bootstrap 核 心 的 JavaScript 文 件 ， 相 关 代 码 如 下 : 


<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min. 
js"></script> 

































































在 HTML 页 面 中 ， 经 常会 看 到 一 些 带 





鸣 








标的 按钮 ， 为 了 实现 这 些 效果 ， 以 往 的 做 法 是 找 
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[ 济 





一 幅 图 像 作为 按钮 的 背景 ， 但 是 如 果 使 用 bootstrap， 就 不 需要 
图 标 ， 例 如 下 面 这 段 代码 ; 


<!ldoctype html> 

<html> 

<head> 

<meta Charset="utf-8"> 

<title>11.10</title> 

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" 
rel="stylesheet"> 

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 

<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></ 
script> 

</head> 

<body> 

<button type="button™" class="btn btn-default btn-lg"> <span 
class="glyphicon glyphicon-user"></span> User </button> 

<button type="button" class="btn btn-default btn-sm"> <span 
class="glyphicon glyphicon-user"></span> User </button> 

<button type="button" class="btn btn-default btn-xs"> <span 
class="glyphicon glyphicon-user"></span> User </button> 

</body> 

</html> 


在 这 段 代 码 中 有 3 个 按钮 ， 我 们 并 没有 为 其 设置 特定 的 背景 图 标 ， 只 是 设置 了 按钮 的 
class 属 性 和 <span> 标 签 的 class 属 性 ， 这 样 我 们 就 创建 了 3 个 尺寸 不 一 样 的 按钮 图 标 ， 如 图 
11.9 所 示 。 
































像 ， 可 以 直接 使 用 字体 

























































































11.10 


€ CG Dfile///C:/xampp/htdocs/11/11.10.html 
应 用 dreamweaver cc 2.。 站 HTML 


主 User 有 User | 里 User 








图 11.9 





























关于 bootstrap 的 更 多 用 法 ， 可 以 访问 官网 (http:/getbootstrap.com) 或 查找 相关 资料 ， 
于 篇 幅 的 关系 ， 这 里 只 做 简单 的 介绍 。 



































203 


第 12 章 HTML 5 基础 


HTML 5 是 下 一 代 HIML 标 准 ， 虽 然 现在 HIML 5 仍 处 于 完善 之 中 ， 但 是 大 部 分 浏览 器 已 
经 支持 某 些 HIML 5 的 功能 。 本 章 我 们 将 介绍 HIML 5 的 基础 知识 。 











12.1 创建 一 个 HTML 5 页 面 














使 用 Dreamweaver 创 建 HTML 页 面 的 时 候 ， 选 择 文档 类 型 为 HTML 5， 如 图 12.1 所 示 。 这 
样 就 可 以 创建 一 个 HTML 5 页 面 ， 在 代码 视图 中 可 以 看 到 如 下 所 示 代 码 : 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 无 标题 文档 </title> 
</head> 

<body> 

</body> 

</html> 


在 这 段 代 码 中 ， 文 档 声明 类 型 非常 简单 ， 只 有 一 句 代 码 “<!doctype html>”， 而 在 之 前 
的 HIML 版 本 中 ， 文 档 声明 类 型 如 下 所 示 : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// 
WWW .Ww3.0rg/TR/html4/lo0se.dtd"> 
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TML 5 基础 


























相 比 之 下 ，HTML 5 使 用 了 更 为 简单 的 文档 声明 方法 。 这 仅仅 是 HTML 5 与 之 
一 部 分 差别 。 在 HIML 5 中 ， 还 使 用 了 体现 结构 语义 化 的 标签 ， 比 如 以 前 用 div 布 



































母 





一 个 结构 的 布局 都 使 用 div 和 id 属性 来 确定 。HIML 代 码 如 下 所 示 ; 


< 
< 
< 
a 
ee 
< 


< 
ee 
< 




















!doctype html> 
html> 
head> 
meta charset="utf-8"> 
title> 无 标题 文档 </title> 
/head> 
body> 
div id="container"> 
<div id="header">Header</div> 
<div id="menu">Menu</div> 
<div id="mainContent"> 
<div id="sidebar">sidebar</div> 
<div id="content">content</div> 
</div> 
<div id="footer">footer</div> 
/div> 
/body> 
/html> 

















如 


< 
< 
4 
< 
< 
< 
< 


< 
ee 



































前 HTML 的 


























局 页 面 时 ， 











EHTML5 中 ， 页 面 布 局 可 以 不 再 依赖 div 元 素 ， 而 是 直接 使 用 结构 化 标签 HTML 代 码 如 
下 所 示 : 




















!doctype html> 

html> 

head> 

neta charset="utf=8"> 

title> 无 标题 文档 </title> 

/head> 

body> 
<header>...</header> 
<nav>...</nav> 
<article> 

<section> 


</section> 
</article> 
<aside>...</aside> 
<footer>...</footer> 
/body> 
/html> 


12.2 HTML 5 结构 


























在 HTML 5 中 采用 了 语义 化 的 文档 结构 ， 新 添加 了 相关 的 结构 元 素 标签 ， 使 
可 以 创建 新 的 HTML 5 结构 。 























这 些 标签 
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12.2.1 section 标 签 


























section 标 签 用 于 定义 文档 中 的 节 ， 比 如 章节 、 页 届 、 页 脚 或 文档 中 的 其 他 部 分 。 












































于 成 节 的 内 容 ， 会 在 文档 流 中 开始 一 个 新 的 节 。 它 用 来 表现 普通 的 文档 内 容 或 应 















































党 
内 容 ， 一 般 会 带 有 标题 。 




















当 我 们 描述 一 件 具 体 事物 的 时 候 ， 通 常 鼓励 使 用 article 来 代替 section， 当 我 们 





内 容 及 其 标题 组 成 。 但 section 元 素 标 签 并 非 一 个 普通 的 容器 元 素 ， 它 表示 


区 块 ， 通 
段 专题 性 的 























使 





般 








Section 


























时 ， 仍 然 可 以 使 用 hl 元 素来 作为 标题 ， 而 不 用 担心 它 所 处 的 位 置 ， 以 及 其 











它 地 方 






































当 一 个 容器 需要 被 直接 定义 样式 或 通过 脚本 定义 行为 时 ， 推 荐 使 用 div 元 素 而 非 section。 





section 结 构 示例 代码 如 下 所 示 : 


<!doctype html> 
<article> 
<h1>Web 编 程 语言 比较 </h1> 
<p>web 编 程 语言 常用 的 有 asp, asp.net, php, jsp...</p> 
<section> 
<h2>asp</h2> 
<p>asp 全 称 Active Server Page</p> 
</section> 
<section> 
<h2>asp.net</h2> 
<p>asp 的 颠覆 版 本 </p> 
</section> 
<section> 
<h2>php</h2> 
<p> 草 根 动态 语言 ， 免 费 ， 强 大 < /p> 
</section> 
</article> 


12.2.2 article 标 签 





旦 











到 ; 





下 
正 合 


<article> 是 一 个 特殊 的 section 标 签 ， 它 比 section 具 有 更 明确 的 语义 ， 它 代表 一 个 独立 的 、 
完整 的 相关 内 容 块 ， 可 独立 于 页 面 其 它 内 容 使 用 。 例 如 一 篇 完整 的 论坛 帖子 、 一 篇 博客 文 
章 、 一 个 用 户 评论 等 等 。 一 般 来 说 ，article 会 有 标题 部 分 (通常 包含 在 header 内 ) ， 有 时 也 会 
包含 footer。article 可 以 嵌 套 ， 内 层 的 article 对 外 层 的 article 标 签 有 隶属 关系 。 例 如 ， 一 篇 博客 










































































的 文章 ， 可 以 用 article 显 示 ， 然 后 一 些 评 论 可 以 以 article 的 形式 嵌入 其 中 。 
article 结 构 示例 代码 如 下 所 示 : 














<article> 
<header> 
<hgroup> 
<h1> 这 是 一 篇 介绍 HTML 5 结构 标签 的 文章 </h1> 
<h2>HTML 5 的 标签 结构 </h2> 
</hgroup> 
<time datetime="2015-06-10">2015.06.10</time> 
</header> 
<p> 文 章 内 容 详情 </p> 


</article> 
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12.2.3 nav 标 签 








nav 标 签 代表 页 面 的 一 个 部 分 ， 是 一 个 可 以 作为 页 面 导航 的 链接 组 ， 其 中 的 导航 元 素 链接 
到 其 它 页 面 或 者 当前 页 面 的 其 它 部 分 ， 使 html 代 码 在 语义 化 方面 更 加 精确 ， 同 时 对 于 屏幕 阅 
读 器 等 设备 的 支持 也 更 好 。 
nav 结 构 示 例 代码 如 下 所 示 : 






















































































<nav> 

<ul> 
<li>asp</1i> 
<li>asp.net</1i> 
<1i>html 5</1i> 
</ul> 

</nav> 


12.2.4 aside 标 签 

















aside 标 签 用 来 装载 非 正 文 的 内 容 ， 被 视 为 页 面 里 面 一 个 单独 的 部 分 。 它 包含 的 内 容 与 页 
的 主要 内 容 是 分 开 的 ， 可 以 被 删除 ， 而 不 会 影响 到 网 页 的 内 容 、 章 节 或 是 页 面 所 要 传达 的 
信息 。 例 如 广告 、 成 组 的 链接 、 侧 边栏 等 等 。 

aside 结 构 示 例 代 码 如 下 所 示 : 
<aside> 
<h1> 和 鲁迅 </h1> 
<p> 和 鲁迅 (1881 年 9 月 25 日 一 1936 年 10 月 19 日 ) ， 原 名 周 樟 寿 ， 后 改名 周 树 人 ， 字 耶 山 ， 后 改 耶 
才 ，" 和 鲁迅 "是 他 1918 年 发 表 《 狂 人 日 记 》 时 所 用 的 笔名 ， 也 是 他 影响 最 为 广泛 的 笔名 ， 浙 江 绍兴 人 </P> 


</aside> 











































































































12.2.5 header 标 签 

















<header> 标 签 定义 文档 的 页 眉 ， 通 常 是 一 些 引 导 和 导航 信息 。 它 不 局 限于 写 在 网 页 头 
部 ， 也 可 以 写 在 网 页 内 容 里 面 。 通 常 <header> 标 签 至 少 包 含 (但 不 局 限于 〉 一 个 标题 标记 
(<hl>-<h6>) ， 可 以 包括 <hgroup> 标 签 ， 还 可 以 包括 表格 内 容 、 标 识 、 搜 索 表单 、<nav> 导 
航 等 。 

header 结 构 示例 代码 如 下 所 示 : 






































<header> 
<hgroup> 
<h1> 网 站 标题 </h1> 
<h1> 网 站 副标题 </h1> 
</hgroup> 
</header> 


12.2.6 footer 标 签 








footer 标 签 定义 section 或 document 的 页 脚 ， 包 含 了 与 页 或 是 部 分 内 容 有 关 的 信 


团 
加 
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息 ， 比 如 说 文章 的 作者 或 者 日 期 。 作 为 页 面 的 页 脚 时 ， 一 般 包 含 了 版 权 、 相 关 文件 和 链接 。 
它 和 <header> 标 签 使 本 一 样 ， 可 以 在 一 个 页 面 中 多 次 使 用 ， 如 果 在 一 个 区 段 的 后 面 加 入 
footer， 那 么 它 就 相当 于 该 区 段 的 页 脚 了 。 

footer 结 构 示 例 代 码 如 下 所 示 : 


<footer> 


Copyright gcopy2014-2015 
</footer> 
















































































12.2.7 hgroup 标 签 





hgroup 标 签 是 对 网 页 或 区 段 section 的 标题 元 素 (hl-h6) 进行 组 合 。 例 如 ， 在 一 区 段 中 有 
连续 的 h 系 列 的 标签 元 素 ， 就 可 以 用 hgroup 将 他 们 括 起 来 。 
hgroup 结 构 示例 代码 如 下 所 示 : 





























<hgroup> 
<h1> 大 标题 </h1> 
<h2> 小 标题 </h2> 

</hgroup> 


12.2.8 figure 标 签 





















































figure 标 签 用 于 对 元 素 进行 组 合 ， 多 用 于 图 片 与 图 片 描述 组 合 。figure 结 构 示例 代码 如 下 
所 示 : 
<figure> 
<img src="img01.gif" /> 
<figcaption> 图 片 描述 信息 </figcaption> 
</figure> 
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在 HTML 5 之 前 ， 为 了 让 网 页 具有 音频 和 视频 的 效果 ， 往 往 需要 使 用 第 三 方 插件 或 者 tash 
工具 ; 而 HTML 5 提供 了 音频 和 视频 的 播放 接口 ， 新 增 了 video 和 audio 标 签 ， 所 有 支持 HIML 
5 的 浏览 器 都 可 以 直接 播放 音频 和 视频 。 












































人 龟 半 检查 浏览 器 是 否 支 持 HTML 5 的 功能 


出 
n 

















目前 并 非 所 有 的 浏览 器 都 很 好 地 支持 HTML 5 的 功能 ， 所 以 为 了 避免 部 分 浏览 器 不 
支持 某 些 属性 的 情况 出 现 ， 在 使 用 HTML 5 的 音频 和 视频 之 前 ， 需 要 对 浏览 器 的 支持 情况 进 
行 检 测 。 运 行 下 面 这 段 代 码 ， 单 击 “ 检 测 ” 按 钮 即 可 查看 当前 浏览 器 是 否 支持 HTML 5 的 视 
频 播放 功能 。 


<!dqoctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<script type="text/javascript"> 
function checkVideo(){ 
if(!!document .createElement ('video') .canPlayType) { 
Var vidTest=document .createElement ("video"); 
oggTest=vidTest .canPlayType ('video/ogg; codecs="theora, vorbis"'); 



























































if (!oggTest) { 
h264Test=vidTest.canPlayType ('video/mp4; codecs="avcl.42E01E， 
mp4a.40.2""'); 
if (!h264Test) { 


document .getElementById ("checkVideoResult") .innerHTML=" 您 的 浏览 器 不 支持 
HTML 5 视频 播放 ! " 
} 
else 
El (h264Test=="probably") { 
document .getElementById ("checkVideoResult") .innerHTML=" 您 的 浏览 器 支 
持 HTML 5 视频 播放 ! "; 
} 
else 1{ 
document .getElementById ("checkVideoResult") .innerHTML=" 您 的 浏览 器 支 
持 部 分 HTML 5 视频 播放 ! "; 
} 
} 
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} 
else { 
if (oggTest=="probably") { 
document .getElementById ("checkVideoResult") .innerHTML=" 您 的 浏览 器 支持 
HTML 5 视频 播放 ! "; 
下 
else { 
document .getElementById ("checkVideoResult") .innerHTML=" 您 的 浏览 器 支持 部 


分 HTML 5 视频 播放 ! "; 
} 
} 
} 


else 1{ 
document .getElementById ("checkVideoResult") .innerHTML=" 您 的 浏览 器 不 支持 HTML 


5 视频 播放 ! " 
} 

， 

</script> 

<title>13.1</title> 

</head> 

<body> 

<div id="checkVideoResult" style="margin:1l0px 0 0 0; border:0; 
padding:0;"> 

<button onclick="checkVideo()" style="font-family:Arial, Helvetica, sans- 
serif; "> 检测 </button> 

</div> 

</body> 

</html> 


然而 在 实际 使 用 中 ， 并 非 每 次 都 需要 执行 以 上 代码 才能 判断 浏览 器 是 否 支 持 HTML 5 的 
视频 功能 ， 在 页 面 中 执行 以 下 代码 也 可 以 进行 判断 。 


<script> 
Var hasVideo = !! (document.createElement ('video') .canPlayType); 


alert (hasVideo); 
SEE 



























































13,2 添加 音频 和 视频 文件 















































在 HTML 5 中 ， 可 以 使 用 video 和 audio 标 签 添加 音频 和 视频 文件 。 前 video 元 素 支 持 
Ogg、MPEG4 和 WebM 格 式 的 视频 文件 ， 而 audio 元 素 支 持 Ogg Vorbis、MP3 和 Wav 格 式 的 音频 
文件 ， 而 且 不 同 的 浏览 器 支持 音频 和 视频 的 程度 也 不 一 样 ， 所 以 在 添加 音 视 频 文件 的 时 候 需 
要 特别 注意 。 例 如 下 面 这 段 代 码 : 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>13.2</title> 

</head> 

<body> 

<audio controls src="Source/song.mp3"></audio> 
<video controls src="Source/movie.mp4"></video> 
</body> 

</html> 




















在 这 段 代 码 中 ，<audio> 元 素 和 <video> 元 素 分 别 使 用 src 指 定 了 一 个 音频 和 视频 文件 ， 而 
controls 属 性 告诉 浏览 器 显示 通用 的 用 户 控制 ， 包 括 开 始 、 停 止 、 调 播 以 及 音量 控制 。 如 
果 不 指 定 controls 特 性 ， 用 户 将 无 法 播放 页 面 上 的 音频 和 视频 。 如 图 13.1 所 示 是 谷歌 浏览 器 中 
音频 和 视频 播放 控件 的 效果 。 











































































































@ OD filey//Cmxampp/htdocs/13/13.2html 


dreemmeaver ce 2.. 口 HTML 

















13.3 指定 备用 的 文件 源 
































<audio> 元 素 和 <video> 元 素 中 的 src 属 性 用 于 指定 音频 和 视频 的 数据 源 地 址 ， 目 前 这 两 个 
元 素 都 支持 3 种 格式 的 的 音频 和 视频 文件 ， 所 以 最 多 可 以 有 3 个 数据 源 。 当 浏览 器 不 支持 播放 
第 1 种 格式 文件 的 时 候 ， 它 会 自动 选择 播放 第 2 种 格式 文件 ， 如 果 第 2 种 也 不 支持 ， 它 会 尝试 
继续 下 一 种 格式 。 
如 果 要 指定 多 个 数据 源 ， 就 需 到 source 标 签 ， 相 关 代码 如 下 所 示 : 


<audio controls> 






























































<source src="Source/song01.0gg" /> 
<source src="Source/song02.mp3" /> 
</audio> 
<video controls> 
<source src="Source/mv01.0gg" /> 
<source src="Source/mv02.mpeg4" /> 
</ video > 
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13.4 video 和 audio 元 素 的 属性 





我 们 上 面 介绍 了 video 和 audio 元 素 的 src 和 controls 属 性 ， 为 了 方便 控制 音频 和 视频 播放 ， 











Video 和 audio 元 素 还 提供 了 其 他 很 多 属性 。 
1. autoplay 属 性 




















当 页 面 加载 时 ， 设 置 是 否 自动 播放 音频 和 视频 文件 。 如 果 需 























件 ， 则 添加 该 属性 ， 否 则 不 添加 该 属性 。 相 关 使 用 代码 如 下 : 


<video src="movie.mp4" autoplay ></video> 
<audio src="song.ogg" autoplay ></ audio> 


2. preload 属 性 




















动 播放 音频 和 视频 文 


当 页 面 加 载 时 ， 设 置 是 否 对 音频 和 视频 文件 进行 预 加 载 。preload 属 性 有 3 个 可 供 选择 的 
值 ，none 表 示 不 进行 预 加 载 ， metadata 表 示 仅 加载 元 数据 ， 即 音频 和 视频 文件 的 大 小 、 第 一 


























帧 、 播 放 列表 和 持续 时 间 等 ，auto 表 示 预 加 载 全 部 音频 和 视频 文件 。 相 关 使 











<video src="movie.mp4" preload="metadata"></video> 


<audiosrc="song.o0gg" preload="metadata"> 


3. poster 属 性 











该 属性 是 video 元 素 属性 ， 设 置 当 视频 不 可 用 时 ， 向 
如 下 : 


<video src="movie.mp4" poster="replace.jpg "></video> 


4. loop 属 性 





设置 是 否 循 环 播放 音频 和 视频 文件 。 如 果 需 要 循环 播 








性 ， 否 则 不 添加 该 属性 。 相 关 使 用 代码 如 下 : 


<video src="movie.mp4" loop ></video> 
<audio src="song.0gg" loop ></ audio> 


5. width 属 性 和 height 属 性 


























这 两 个 属性 是 video 元 素 属 性 ，width 属 性 用 于 指定 视频 的 宽度 ，height 属 性 用 了 























的 高 度 ， 单 位 均 是 像素 。 相 关 使 用 代码 如 下 : 























展现 








户 











代码 如 下 : 








幅 图 片 。 相 关 使 用 代码 














音频 和 视频 文件 ， 则 添加 该 属 























<video src="movie.mp4" width="400" height="300" ></video> 


6. muted 属 性 

















指定 视频 


当 页 面 加 载 时， 设置 播 放 器 是 否 被 静音 。 如 果 需 要 静音 ， 则 添加 该 属性 ， 否 则 不 添加 该 

















属性 。 相 关 使 用 代码 如 下 : 
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<Video src="movie.mp4" muted></video> 
<audio src="song.mp3" muted ></audio> 


13.5 使 用 JavaScript 控 制 播放 














使 用 JavaScript 也 可 以 控制 video 和 audio 元 素 进行 播放 。 在 HTML 5 中 提供 了 4 种 控制 播放 
功能 的 方法 ， 分 别 介 绍 如 下 : 


1. play 方 法 


除了 播放 器 自己 的 播放 功能 外 ， 用 户 还 可 以 在 脚本 中 使 用 play 方 法 来 控制 音频 和 视频 的 
播放 功能 ， 相 关 使 用 代码 如 下 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utE=8"> 

<title>13.3</title> 

<script> 

function play(){ 

Var Vvideo=document .getElementById ("MyVideo"); 
video.play (); 

lj 

</Seript> 

</head> 

<body> 

<video id="MyVideo" src="Source/movie.mp4" controls></video> 
<button onClick="play()">play</button> 
</body> 

</html> 


2. pause 方 法 
与 play 方 法 相对 应 的 pause 方 法 设置 暂停 播放 音频 和 视频 功能 ，pause 方 法 也 需要 在 脚 
本 中 设置 才能 使 用 ， 相 关 使 用 代码 如 下 : 


<!doctype html> 
<html> 
<head> 









































































































































<meta charset="utEF=8”"> 
<title>13.4</title> 
<script> 

function pause(){ 
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Var video=document .getElementById ("MyVideo"); 


video.pause(); 
§ 

</script> 
</head> 

<body> 


<video id="MyVideo" src="Source/movie.mp4" controls></video> 


<button onClick="pause () ">pause</button> 


</body> 
</html> 


3. load 方 法 














调用 该 方法 可 重新 加 载 音 频 和 视频 文件 进行 播放 。 相 关 使 














<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>13.5</title> 
<script> 

function load(){ 




















var video=document .getElementById ("MyVideo"); 


video.1o0ad(); 
} 

</script> 
</head> 
<body> 


代码 如 下 : 


<video id="MyVideo" src=" Source/movie.mp4 " controls></video> 
<button onClick="lo0ad()">load</button> 


</body> 
</html> 


4. canPlayType 方 法 








该 方法 用 于 测试 浏览 器 是 否 支持 指定 的 类 型 ， 并 返回 结果 。 如 果 返 区 



























































览 器 不 支持 此 种 播放 类 型 ， 如 果 返 


o 














probably 则 表示 浏览 器 确定 支持 此 种 播放 类 型 ， 详 见 13.1 章 节 。 


13.6 音频 和 视频 播放 事件 














在 音频 和 视频 播放 的 整个 过 程 














可 以 实现 更 多 的 效果 。 在 HTML 5 中 ， 与 video 和 audio 元 素 相关 的 寻 





ph， 会 触发 


系列 的 事件 ， 捕 获 这 些 导 








上 l 件 并 


空 字符 中 
maybe 则 表示 浏览 器 可 能 支持 此 种 播放 类 型 ， 如 果 返 





加 则 表示 总 











6 











fF 加 以 利 

















有 件 如 表 13.1 所 示 。 
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属性 
loadstart 
progress 
suspend 
abort 
error 


emptied 


stalled 

play 

pause 
loadedmetadata 
loadeddata 


waiting 


playing 
canplay 


canplaythrough 
seeking 

seeked 
timeupdate 


ended 
rantechange 
durationchange 


volumechange 
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表 13.1 
描述 
浏览 器 开始 在 网 上 寻找 媒体 数据 
浏览 器 正在 获取 媒体 数据 
浏览 器 暂停 获取 媒体 数据 ， 但 是 下 载 过 程 并 没有 正常 结束 
浏览 器 在 下 载 完全 部 媒体 数据 之 前 终止 获取 媒体 数据 ， 但 是 并 不 是 由 错误 引起 的 
获取 媒体 数据 过 程 中 出 错 
Video 元 票 或 audio 元 系 所 在 网 络 突 然 变 为 未 初始 化 状态 (可 能 引起 该 事件 的 原因 有 两 
个 : 1. 载 入 媒体 时 突然 发 生 一 个 致命 错误 ;2. 在 浏览 器 正在 选择 支持 的 播放 格式 时 ， 又 
调用 了 load 方 法 重新 载 入 媒体 。) 
浏览 器 尝试 获取 媒体 数据 失败 
即将 开始 播放 ， 当 执行 play 方 法 时 触发 ， 或 数据 下 载 后 元 条 被 设置 为 autoplay 属 性 
播放 暂停 ， 当 执行 Pause 方 法 时 触发 
浏览 器 获取 完毕 媒体 的 时 间 长 和 字 节 数 
浏览 器 已 加 载 完 毕 到 当前 播放 为 止 的 媒体 数据 ， 准 备 播放 
播放 过 程 由 于 得 不 到 下 一 帧 而 暂停 播放 〈 例 如 下 一 帧 尚未 加 载 完毕 ) ， 但 很 快 就 能 够 得 
到 下 一 帧 
正在 播放 
浏览 器 能 够 播放 媒体 ， 但 估计 以 当前 播放 速率 不 能 直接 将 媒体 播放 完毕 ， 播 放 期 间 需要 
缓冲 
浏览 器 能 够 播放 媒体 ， 而 且 以 当前 播放 速率 能 够 将 媒体 播放 完毕 ， 不 再 需要 进行 缓冲 
seeking 属 性 变 为 tue， 浏 览 器 正在 请 求 数据 
seeked 属 性 变 为 false， 浏 览 器 停止 请 求 数据 
当前 播放 被 改变 ， 可 能 是 播放 过 程 中 的 自然 改变 ， 也 可 能 是 被 人 为 改变 ， 或 由 于 播放 不 
能 连续 而 发 生 的 跳 变 
播放 结束 后 停止 播放 
defaultplaybackrate 属 性 (默认 播放 速率 ) 或 playbackrate 属 性 〈 当 前 播放 速率 ) 被 改变 
播放 时 长 被 改变 
volume 属 性 (音量 ) 被 改变 或 muted 属 性 〈 静 音 状 态 ) 被 改变 









































































































































在 JavaScript 中 捕捉 事件 的 方式 有 两 种 ， 第 1 种 是 监听 的 方式 ， 使 用 video 元 素 或 audio 元 素 

















的 addEventListener 方 法 对 事件 进行 监听 。 相 关 代码 如 下 : 


var video=document .getElementById("MyVideo"); 
Var img=document .getElementById ("MyImg"); 
Video.addEventListener ("play", function(){ 
img.hidden=true; 


},false); 

















video 表 示 页 面 上 的 video 元 素 或 audio 元 素 ，play 表 示 监 听 的 事件 名 称 ， 在 function 中 
处 理 当 音频 和 视频 播放 的 时 候 需要 执行 的 其 他 操作 ，img.hidden=true 表 示 页 面 上 的 一 个 图 



















































































片 被 隐藏 ，false 表 示 浏 览 器 采用 bubbing 响 应 方式 ， 如 果 为 true 则 表示 浏览 器 采用 Capture 


响应 方式 。 
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另 一 种 捕捉 事件 的 方式 是 在 JavaScript 脚 本 中 获取 事件 句柄 〈 事 
柄 ) ， 并 对 事件 句柄 赋值 。 相 关 代码 如 下 : 


Var img=document .getElementById ("MyImg"); 

function showImg (flag) { 

img.hidden=flag; 

} 

<video id="MyVideo" src="movie.mp4" 
onPause="showImg (false);" ></video> 

<img id="MyImg" src="myimage.png" hidden="true"/> 

















件 名 称 前 加 on 就 是 事件 名 











controls onPlay="showImg (true);" 
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为 了 适应 Web 2.0 技 术 ，CSS 3 推出 了 新 的 标准 ， 并 且 提供 了 一 系列 强大 的 功能 ， 比 如 许 
多 新 的 CSS 属 性 、 各 种 CSS 特 效 ， 甚 至 还 有 CSS 动 画 、 元 素 的 变换 。 本 章 将 详细 介绍 CSS 3 的 
新 特性 以 及 一 些 使 用 技巧 。 





























14,1 CSS 3 选择 器 





























CSS 3 中 新 添加 了 很 多 新 的 选择 器 ， 使 用 这 些 选择 器 可 以 更 准确 、 更 方便 地 定位 HTML 页 
面 中 的 元 素 。 
































14.1.1 结构 性 伪 类 选择 器 


结构 性 伪 类 选择 器 与 类 选择 器 有 很 大 的 不 同 ， 它 不 需 户 指定 元 素 的 类 名 ， 而 是 
CSS 提 供 选择 器 名 称 ， 从 而 快速 定位 指定 的 元 素 。 在 CSS 3 中 ， 结 构 性 伪 类 选择 器 还 可 以 细 分 
为 以 下 几 种 : 

1. 伪 元 素 选 择 器 


伪 元 素 选择 器 主要 应 用 于 指定 名 称 的 元 素 上 ， 不 需要 用 户 单独 为 其 设置 选择 器 名 称 ， 而 
是 使 用 CSS 3 中 已 经 定义 的 选择 器 名 称 ， 这 类 选择 器 主要 包括 以 下 4 种 。 


(1) first-line 伪 元 素 选择 器 : 为 元 素 中 第 一 行 的 文字 应 用 样式 。 

(2) first-letter 伪 元 素 选择 器 : 为 元 素 中 第 一 个 字母 或 文字 应 用 样式 。 
(3) before 伪 元 素 选择 器 : 在 指定 元 素 之 前 插入 一 些 内 容 。 

(4) after 伪 元 素 选 择 器 : 在 指定 元 素 之 后 插入 一 些 













































































































































































内 容 。 
例如 下 面 这 段 代码 ， 在 <p> 元 素 中 有 4 行文 本 ， 使 用 伪 元 素 选 择 器 设置 第 一 行文 本 的 颜色 
为 红色 ， 第 一 个 文字 大 字号 为 24px， 在 <span> 标 签 的 前 面 插入 一 个 三 角形 符号 ， 在 <p> 元 素 
的 后 面 插入 一 个 五 角 星 符号 ， 完 整 的 代码 如 下 所 示 : 
<!doctype html> 


<html> 
<head> 
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<meta charset="utf-8"> 
<title>14.1</title> 
<style> 

pi:first-line { 

color: red; 


p:first-letter { 
font-size: 24px; 


span:before { 
content: "A" 


p:after { 
content: "次 " 





</style> 

</head> 

<body> 

<p> 床 前 明月 光 <br> 
疑 是 地 上 和 霜 <br> 
<span> 举 头 望 明月 </span><br> 
低头 思 故 乡 </p> 

</body> 

</html> 


运行 这 段 代 码 后 ， 效 果 如 图 14.1 所 示 。 
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漠 站 有 dreamwesver ce2.. 站 HTML 


床 前 明月 光 


颖 是 地 上 逢 
人 举 头 部 明月 
低头 思 故 乡 安 








图 14.1 











2. root 选 择 器 


Ioot 选 择 器 用 于 设置 页 面 根 元 素 的 样式 。 在 HIML 页 
<html> 元 素 ， 它 的 使 用 方法 如 下 所 示 : 






































团 
如 
U 





， 根 元 素 就 是 位 于 最 顶层 结构 



























































<style> 

:root{ 
background:blue; 
’ 

</style> 


3. not 选 择 器 


























HTML 页 面 中 的 各 种 元 素 都 是 柑 套 在 一 起 使 用 的 ， 当 用 户 为 上 一 级 元 素 设置 样式 后 ， 
























































于 样式 的 继承 特性 ， 被 嵌 套 的 元 素 会 具有 相同 的 样式 。 为 了 能 够 排除 风 套 元 素 中 某 些 不 使 
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继承 样式 的 元 素 ， 可 以 使 











not 选 择 器 将 其 排除 。 例 如 ，<div> 元 素 中 
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过 





嵌 套 了 多 个 元 素 ， 我 们 











设置 <div> 元 素 字体 颜色 为 红色 ， 但 是 不 设置 <p> 元 素 的 颜 


<!ldoctype html> 
<html> 
<head> 


<meta charset="utf-8"> 


<title>14.2</title> 
<style> 

div :not(p){ 
color:red; 

} 

</style> 
</head> 

<body> 

<div> 
<h1> 标 题 </h1> 
<p> 文 章 的 内 容 </p> 
</div> 

</body> 

</html> 





运行 这 段 代 码 后 ， 效 果 如 图 14.2 所 示 。 


4. empty 选 择 器 











eFC 


Dd a 


标题 


文章 的 内 容 








图 14.2 














色 ， 可 以 使 


file:///C:/xampp/htdocs/14/14.2.html 














以 下 代码 ; 




















如 


如 果 要 为 HIML 页 




















为 空 的 元 素 ， 然 后 为 其 设置 样式 。 但 是 在 CSS 3 中 ， 可 以 直接 使 








Ph 所 有 内 容 为 空 的 元 素 设置 样式 ， 需 








使 用 JavaScript 获 取 所 有 内 容 














这 个 功能 。 例 如 下 面 这 段 代码 ; 











<!doctype html> 
<html> 
<head> 


<meta charset="utf-8"> 


<title>14.3</title> 
<style> 

:emptyt{ 

width:50px; 
height:20px; 


background-color:red; 


上 

















empty 选 择 器 很 方便 地 完成 
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</style> 

</head> 

<body> 

<p></p> 

<p>CSS 3 新 增 的 各 种 选择 器 </p> 
</body> 

</html> 

















在 这 段 代 码 中 ，HTML 页 面 中 有 两 个 <p> 元 素 ， 其 中 第 一 个 <p> 元 素 的 内 容 为 空 ， 为 了 凸 























显 该 元 素 ， 直 接 使 


属 1 

















1/C:/xampp/htdocs/14/14.3.html 








洲 庙 有 站 dreamweaver cc 2,。 中 HTML 


CSS 3 新 增 的 各 种 选择 器 


5. target 选 择 器 























target 选 择 器 用 于 指定 页 面 中 某 个 元 素 的 样式 。 在 使 用 



































性 指定 样式 ， 而 元 素 的 id 又 被 当做 页 


























empty 选 择 器 为 其 设置 样式 。 运 行 这 段 代 码 后 ， 效 果 如 图 14.3 所 示 。 


target 选 择 器 时 ， 需 要 根据 元 素 的 id 





中 的 超 链 接 来 使 
































超 链接 时 ，target 选 择 器 会 根据 选中 


。 例 如 下 面 这 段 代 码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>14.4</title> 
<style> 

:target{ 

background:red; 
font-size:24px; 
color:white; 

} 

</style> 

</head> 

<body> 

<a href="#p1"> 第 一 个 段落 </a> 
<a href="#p2"> 第 二 个 段落 </a> 

















<p id="pl"> 这 里 显示 的 是 第 一 个 段落 。</p> 
<p id="p2"> 这 里 显示 的 是 第 二 个 段落 。</p> 


</body> 
</html> 


在 这 段 代码 中 有 两 个 <p> 元 素 ， 他 们 的 i 属性 分 别 对 应 另外 两 个 <a> 元 素 的 锚 点 ， 当 点 
hp 元 素 的 锚 点 找到 对 应 id 的 <p> 元 素 ， 并 将 设置 的 样式 应 

















， 这 样 target 选 择 器 的 样式 才能 起 





HH 
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到 该 元 素 上 ， 效 果 如 图 14.4 所 示 。 











这 里 显示 的 是 第 二 个 段落 。 





图 14.4 


7. first-child 和 last-child 选 择 器 


在 使 用 列表 时 ， 有 时 需要 为 第 一 个 列表 项 和 最 后 一 个 列表 项 使 用 不 同 的 样式 ， 为 了 定位 
这 两 个 元 素 ， 就 需要 为 它们 设置 不 同 的 id 属性 。 然 而 在 CSS 3 中 ， 可 以 省 略 id 属性 ， 直 接 使 
first-child 帮 Mlast-child 选 择 器 定位 这 两 个 元 素 。 例 如 下 面 这 段 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>14.5</title> 

<style> 

1i:first-child{ 

color:red; 

font-weight:bold; 

了 

li:last-child{ 

color:blue; 

font-weight:bold; 

</style> 

</head> 

<body> 

<ul> 

<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 

</ul> 

</body> 

</html> 


在 这 段 代码 中 ， 分 别 使 用 first-child 和 last-child 选 择 器 为 第 一 个 列表 项 和 最 后 一 个 列表 项 
设置 了 不 同 的 样式 ， 效 果 如 图 14.5 所 示 。 
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8. first-of-type 和 last-of-type 选 择 器 














图 14.5 














在 使 用 first-child 和 1last-child 选 择 器 时 ， 如 果 相 同 
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这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf=8"> 
<title>14.6</title> 
<style> 

.Content :first-of-type { 
background: red; 
font-size: 24px; 

color: white; 
.content:last-of-type { 
background: green; 
font-size: 24px; 

color: white; 

: 

</style> 

</head> 

<body> 

<div> 











<hl class="content"> 标 题 1</h1> 


层级 中 有 多 种 元 素 ， 我 们 只 能 设置 第 一 











种 元 素 和 最 后 一 种 元 素 的 样式 ， 不 能 设置 第 一 个 和 最 
的 需求 ， 可 以 使 用 first-of-type 和 1last-of-type 选 择 器 定位 相同 类 型 的 第 一 个 元 素 和 最 后 一 个 元 
素 。 例 如 


<p class="content"> 第 一 个 段落 。</p> 


<hl class="content"> 标 题 2</h1> 


<p class="content"> 第 二 个 段落 。</p> 


<hl class="content"> 标 题 3</h1> 


<p class="content"> 第 三 个 段落 。</p> 


<hl class="content"> 标 题 4</h1> 


<p class="content"> 第 四 个 段落 。</p> 


</div> 
</body> 
</html> 














后 一 个 相同 元 素 的 样式 。 为 了 满足 这 样 





在 这 段 代 码 中 ， 分 别 使 用 first-of-type 和 last-of-type 选 择 器 定位 到 了 第 一 个 和 最 后 一 个 
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<h1> 元 素 ， 以 及 第 一 个 和 最 后 一 个 <p> 元 素 ， 并 为 其 设置 了 不 同样 式 。 运 行 这 段 代 码 后 ， 效 





果 如 





图 14.6 所 示 。 

















9. nth-child 和 nth-last-child 选 择 器 





14.6 











nth-child 选 择 器 和 nth-last-child 选 择 器 是 对 first-child 选 择 器 和 last-child 选 择 器 的 扩展 。nth- 
























































child 选 择 器 用 于 指定 父 元 素 中 第 几 个 元 素 的 样式 ， 而 nth-last-child 选 择 器 正好 相反 ， 指定 
父 元 素 中 倒数 第 几 个 元 素 的 样式 。 例 如 下 面 这 段 代码 : 











<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>14.7</title> 

<style> 

li:nth-child(2){ 

color:red; 

font-weight:bold; 

. 

li:nth-last-child(2){ 

color:blue; 

font-weight:bold; 

</style> 

</head> 

<body> 

<ul> 
<1i> 列 表 项 1</1i> 
<1i> 列 表 项 2</1i> 
<1i> 列 表 项 3</1i> 
<1i> 列 表 项 4</1i> 
<1i> 列 表 项 5</1i> 

</ul> 

</body> 
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</html> 


在 这 段 代 码 中 ， 分 别 使 用 nth-child 选 择 器 和 nth-last-child 选 择 器 设置 第 2 个 列表 项 和 倒数 第 
2 个 列表 项 的 样式 。 运 行 这 段 代 码 后 ， 效 果 如 图 14.7 所 示 。 


























© 3 fie///c/xampp/htdocs/14/14.7.html 
| dreamwearer ce 2.. D3 HTML 


。 列表 项 1 


* 列表 项 2 
。 列表 项 3 
。 列表 项 4 
。 列 表 项 S 








图 14.7 








10. nth-of-type 和 nth-last-of-type 选 择 器 


与 nth-child 和 nth-last-child 选 择 器 对 应 的 ， 可 以 使 用 nth-of-type 和 nth-last-of-type 选 择 器 在 
定位 元 素 的 时 候 按照 元 素 类 型 进行 定位 。 例 如 下 面 这 段 代码 : 


<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>14.8</title> 
<style> 
.content:nth-of-type(odd) { 
background: red; 
color: white; 
1: 
.Content :nth-of-type (even) { 
background: green; 
color: white; 
上 
</style> 
</head> 
<body> 
<div> 
<hl class="content"> 标 题 1</h1> 
<p class="content"> 第 一 个 段落 。</p> 
<hl class="content"> 标 题 2</h1> 
<p class="content"> 第 二 个 段落 。</p> 
<hl class="content"> 标 题 3</h1> 
<p class="content"> 第 三 个 段落 。</p> 
<hl class="content"> 标 题 4</h1> 
<p class="content"> 第 四 个 段落 。</p> 
</div> 
</body> 
</html> 


在 这 段 代 码 中 ， 分 别 使 用 nth-of-type 和 nth-last-of-type 选 择 嚣 定位 <hl> 和 <p> 元 素 ， 其 中 



































U 
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odd 代 表 奇 数 ，even 代 表 偶 数 。 运 行 这 段 代 码 后， 效果 如 


11. 循环 使 用 式样 
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以 











smpp/htdocs/ LA/14.8 html 





图 14.8 








14.8 所 示 。 








对 于 以 上 介绍 的 几 种 选择 器 ， 都 需要 明确 定位 到 第 几 个 元 素 ， 











环 使 
如 下 























面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>14.9</title> 

<style> 

li:nth-child(3n+1) { 

background: red; 

color: white; 

了 

li:nth-child(3n+2) { 

background: blue; 

color: white; 

: 

li:nth-child(3n+3) { 

background: green; 

color: white; 

margin-bottom: 5px; 

上 

</style> 

</head> 

<body> 

<ul> 

<1i> 列 表 项 A</1i> 
<1i> 列 表 项 B</1i> 
<1i> 列 表 项 Cc</1i> 
<1i> 列 表 项 A</1i> 
<1i> 列 表 项 B</1i> 





样式 ， 那 么 应 该 如 何 设置 呢 ? 对 了 


于 这样 的 需求 ， 在 CSS 3 


如 果 需 要 对 某 几 个 元 素 循 











ph 仍然 可 以 轻松 地 完成 。 例 
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<1i> 列 表 项 c</1i> 
<1i> 列 表 项 A</1i> 
<1i> 列 表 项 B</1i> 
<1i> 列 表 项 c</1i> 

</ul> 

</body> 

</html> 


在 这 上段 代码 中 ，3 个 nth-child 选 择 器 的 参数 分 别 为 “3n+1”“3n+2” 和 “3n+3”， 其 中 n 
前 面 的 3 表示 总 共有 3 种 样式 ， 而 1、2、3 分 别 对 应 循环 中 的 第 1 种 、 第 2 种 和 第 3 种 样式 ， 也 就 
是 为 循环 中 的 第 几 个 元 素 设置 样式 。 运 行 这 段 代 码 后 ， 效 果 如 图 14.9 所 示 。 

































































12. only-child 和 only-of-type 选 择 器 


only-child 选 择 器 是 父 元 素 只 有 一 个 子 元 素 时 使 用 的 样式 ， 而 only-of-type 选 择 器 是 对 only- 
child 选 择 器 的 扩展 ， 在 应 用 样式 时 考虑 了 子 元 素 的 类 型 。 例 如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>14.10</title> 

<style> 

li:only-child { 

color: red; 

font-weight:bold; 

</style> 

</head> 

<body> 

<ul> 

<1i> 列 表 项 </1i> 

</ul> 

<ul> 

<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 
<1i> 列 表 项 </1i> 

</ul> 

</body> 

</html> 
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在 这 段 代 码 中 ， 页 面 中 有 两 个 列表 ， 第 1 个 列表 只 有 1 个 列表 项 ， 第 2 个 列表 中 有 3 个 



































14.10 所 示 。 


14.1.2 UI 元 素 状态 伪 类 选择 器 


从 字面 意思 理解 ， 这 类 选择 器 只 有 当 元 素 处 了 
定位 到 元 素 。 例 如 ， 经 常用 到 的 E:link、E:visited、E:hover 和 E:active 就 属 卫 


B1410 


| Be 


。 列 表 项 


。 列 素 项 
。 列表 项 
。 列 表 项 




































































only-child 选 择 器 设置 第 1 个 列表 的 列表 项 样式 。 运 行 这 段 代码 后 ， 效 果 如 图 


file///C/xampp/htdocs/14/14.10.html 
江 直 dreamwesver ce2.， HTML 

















F 某 种 状态 的 时 候 ， 才 能 通过 对 应 的 选择 器 





F 这 类 选择 器 。 在 













































































CSS 3 中 ， 又 新 增 了 E:enabled、E:disabled 和 E:checked 选 择 器 ，E:enabled 选 择 器 选择 所 有 
可 用 的 元 素 ，E:disabled 选 择 器 用 于 选择 所 有 不 可 用 的 元 素 ，E:checked 选 择 器 用 于 选择 所 有 选 
中 的 元 素 。 








14.1.3 通用 兄弟 元 素 选 择 器 

















通用 兄弟 元 素 选择 器 


















































<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>14.11</title> 
<style> 
h3~p { 
background: red; 
color: white; 
3 
</style> 
</head> 
<body> 
<div> 
<h3> 标 题 </h3> 
<p> 这 里 是 内 容 </p> 


<ul> 


<1i><p> 列 表 项 目 </p></1i> 
<1i><p> 列 表 项 目 </p></1i> 


</ul> 
</div> 
</body> 
</html> 


设置 父 级 元 素 相 同 、 子 元 素 有 多 种 类 型 、 从 某 个 类 型 的 子 元 素 
往 后 的 其 他 子 元 素 的 样式 。 例 如 下 
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在 这 段 代码 中 ，<h3> 元 素 和 相 邻 的 <p> 元 素 属 于 同一 级 ， 可 以 称 之 为 兄弟 元 素 。 所 以 这 
里 使 用 h3~p 选 择 器 直接 定位 这 个 <p> 元 素 并 设置 样式 ， 但 是 这 并 不 影响 列表 中 <p> 元 素 的 样 
式 。 运 行 这 段 代码 后 ， 效 果 如 图 14.11 所 示 。 



























































ro 


€ 3 CC I fle///c/xampp/htdocs/14/14.1Lhtml 
洪 一 二 [) dreamweaver cc 三。 HTME 








图 14.11 











14.2 @Font-face 特 性 

















@font-face 可 以 用 来 加 载 字体 样式 ， 而 且 它 还 能 够 加 载 服务 端的 字体 文件 ， 即 便 客户 端 
没有 安装 相应 的 字体 ， 也 可 以 通过 这 种 方式 加 载 正确 的 字体 。 例 如 下 面 这 段 代 码 ， 


<style> 

@font-face{ 
font-family:BorderWeb; 
src:url (BORDERWO .eot); 





























} 
@font-face { 
font-family: Runic; 
src:url (RUNICMTO .eot); 
} 
.border { font-size:35px; color:black; font-family:"BorderWeb" } 
.event { font-size:24px; color:black; font-family:"Runic" } 
</style> 


在 这 段 代 码 中 ， 首 先 使 用 @font-face 声 明 两 个 服务 端 字体 ， 这 两 个 服务 端 字体 名 称 分 别 为 
BorderWeb 和 Runic， 并 分 别 指定 其 来 源 为 BORDERWO0.eotfhRUNICMT0.eot。 这 样 我 们 就 可 以 在 
样式 中 直接 使 用 这 两 个 字体 了 ， 即 使 客户 端 上 没有 安装 这 两 种 字体 ， 仍 然 可 以 正确 显示 。 















































14.:3 Word-wrap 和 Text-overflow 


























Word-wrap 属 性 用 于 设置 长 单词 换行 到 下 一 行 ， 例 如 下 面 这 段 代码 : 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf=8"> 
<title>14.13</title> 
<style> 

pi:first-child{ 
width:300px; 

border:lpx solid #832A2C; 
， 

p:last-child{ 
width:300px; 

border:lpx solid #832A2C; 
word-wrap:break-word; 

3 

</style> 

</head> 

<body> 
<p>asdfjlasldfjlasdfllkajsdfkljasjdflkjsdajkflasdjkfasljfd</p> 
<p>asdfjlasldfjlasdfllkajsdfkljasjdflkjsdajkflasdjkfasljfd</p> 
</body> 

</html> 


在 这 段 代码 中 有 两 个 相同 的 段落 文本 ， 第 1 个 段落 没有 设置 word-wrap 属 性 ， 第 2 个 段落 设 
置 了 word-wrap 属 性 。 运 行 这 段 代 码 后 ， 效 果 如 图 14.12 所 示 。 




















€ DC DY fle///c/xampp/htdocs/14/14.13.html 
淮 焉 四“ 门 dreamweaver ce 门 HTML 


Bedejlasl dfjla; ajsdEkljasjdflkjsqajxflasdjkfasljfd 











图 14.12 














Text-overflow 属 性 用 于 设置 当 容 器 无 法 容纳 文本 时 应 该 如 何 进行 处 理 。 需 要 注意 的 是 ， 



























































该 属性 必须 和 overflow:hidden 配 合 使 用 ， 否 则 没有 效果 。 例 如 下 面 这 段 代码 : 
<!ldoctype html> 
<html> 
<head> 


<meta charset="utf-8"> 
<title>14.14</title> 
<style> 

pi:first-child{ 
width:300px; 

border:lpx solid #832A2C; 
和 

p:last-child{ 
width:300px; 
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border:lpx solid #832A2C; 

overflow:hidden; 

text-overflow:clip; 

， 

p:nth-child(2){ 

width:300px; 

border:lpx solid #832A2C; 

overflow:hidden; 

text-overflow:ellipsis; 

</style> 

</head> 

<body> 
<p>asdfjlasldfjlasdfllkajsdfkljasjdflkjsdajkflasdjkfasljfd</p> 
<p>asdfjlasldfjlasdfllkajsdfkljasjdflkjsdajkflasdjkfasljfd</p> 
<p>asdfjlasldfjlasdfllkajsdfkljasjdflkjsdajkflasdjkfasljfd</p> 
</body> 

</html> 


在 这 段 代 码 中 ， 有 3 段 相同 的 文本 ， 分 别 为 这 3 段 文 本 设置 不 同 的 样式 ， 其 中 第 2 段 文 本 
和 第 3 段 文 本 都 设置 了 不 同 的 text-overflow 属 性 。 运 行 这 段 代码 后 ， 效 果 如 图 14.13 所 示 。 


























< [A file:///C/xampp/htdocs/14/14.14.html 


洪 开 轴 [0 dreamweaver 





ESdEilasldfilassfllkaisdfkljasjdfkjs 








图 14.13 











人 性 4 CSS 3 的 多 列 布局 





我 们 经 常 可 以 在 报纸 上 看 到 一 个 页 面 排 版 多 列 的 布局 方式 ， 现 在 CSS 3 中 也 可 以 轻松 实 
现 这 样 的 布局 。 要 实现 这 样 的 效果 ， 需 要 使 用 以 下 3 个 属性 。 


e Column-count: 表示 布局 几 列 。 
e@ Columne-rule: 表示 列 与 列 之 间 的 间隔 条 的 样式 。 
e Column-gap: 表示 列 与 列 之 间 的 间隔 。 

例如 下 面 这 段 代 码 : 


<!doctype html> 
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<html> 

<head> 

<meta charset="utf-8"> 

<title>14.15</title> 

<style> 

pi 

-webkit-column-count: 3; 

-Webkit-column-rule: lpx solid #bbb; 

-Webkit-column-gap: 2em; 
} 

</style> 

</head> 

<body> 


<p> 它 曾经 是 ， 在 1888 年 以 前 。1888 年 北洋 舰队 正式 成 军 ， 此 时 它 有 25 舰 舰艇， 旅顺 、 威 海 、 大 


泪 三 处 主要 基地 ， 军 队 训练 水 平 不 亚 于 西方 的 远东 海上 劲旅 ， 其 中 " 定 远 "、 


"镇 远 "2 艘 一 等 铁甲 舰 称雄 亚 


洲 。 然 而 清 政 府 不 懂得 海军 是 一 个 需要 连续 投入 、 不 断 更 新 的 军种 ， 此 后 就 紧缩 开支 ， 甚 至 严令 禁止 再 添 


购 新 的 舰 、 炮 、 军 火 ， 最 终 北洋 海军 的 主力 只 剩 下 8 艘 军舰 。</P> 
</body> 
</html> 


























-Webkit-column-count 设 置 3 列 布局 ， 使 
-Webkit-column-gap 设 置 列 间隔 为 2em。 








在 这 上段 代码 中 ， 使 
之 间 的 间隔 样式 ， 使 
14.14 所 示 。 



































-webkit-column-rule 设 置 列 


运行 这 段 代码 后 ， 效 果 如 图 
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所 © [file///c:/xampp/htdocs/14/14.15.html 坪 
洲 丘 用 [) dreamweaver cc 2.， 口 HTML 
它 曾 经 是 ， 在 1988 年 以前 。1888 生 北洋 由。 远 ” ”2 稻 一 等 铁甲 织 称 友 亚 | 火 ， 最 终 北 洋 光 军 的 主力 只 用 下山 军 

也 是 区 所 宇 ， 此 时 它 有 25 般 舰艇 ， 旅 顺 神 。 De 吉 各 和 了 过 舰 

威海 、 大 洁 三 处 主要 基地 ， 和 二 续 投 入 、 不 断 更 新 的 军种 ， 区 

不 亚 于 埋 方 的 远东 海上 劲 族 ， 其 支 ， 甚 至 严令 禁止 再 添 购 新 的 舰 、 炮 、 

图 14.14 
> 人 
14.5 边框 和 颜色 
-2 
义 前 为 了 在 页 面 中 制作 一 个 圆 角 效果 ， 总 是 需要 费 尽 周折 ， 而 现在 CSS 3 中 提供 了 圆 角 

边框 的 设置 ， 通 过 border-radius 属 性 可 以 直接 设置 圆 角 边框 。 例 如 ， 使 用 下 面 的 代码 可 以 直接 
































设置 圆 角 半 径 为 30px 的 div， 效 果 如 图 14.15 所 示 。 














<!doctype html> 
<html> 

<head> 

<meta charset="utf=8"> 
<title>14.16</title> 
































231 





人 网 站 制作 、 发 布 与 维护 技术 实战 








<style> 

divt{ 

width:200px; 
height:160px; 
border-radius:30px; 
background-color:#A38484; 
} 

</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


1416 x 
Ln C file///C:/xampp/htdocs/14/14.16.html 


江 宇 二 DD] dreamweaver ce 2 品 HIML 








14.15 











CSS 3 还 提供 了 两 种 对 颜色 透明 度 支持 的 方式 ， 一 种 是 通过 rgba 来 设置 透明 度 ， 另 一 种 是 
通过 hs 来 设置 透明 度 。 相 关 代码 如 下 所 示 ， 这 里 的 0.75 和 0.68 就 代表 了 透明 度 。 


background: rgba(0, 0, 255, 0.75); 
colors hslatl Ll2 ,12% 33% 068)s 


14.6 CSS 3 的 渐变 效果 


在 为 某 些 元 素 设置 背景 的 时 候 ， 经 常会 用 到 渐变 效果 ， 为 了 达到 这 种 效果 ， 我 们 会 使 
一 幅 有 渐变 效果 的 图 片 作为 背景 。 在 CSS 3 中 就 不 需要 这 么 麻烦 了 ， 只 需要 通过 属性 设置 上 
可 完成 渐变 效果 。 


14.6.1 线性 渐变 


线性 渐变 可 以 实现 从 一 点 向 另 一 点 的 颜色 过 渡 ， 可 以 设置 一 个 起 点 和 一 个 方向 ， 或 者 是 
一 个 角度 。 线 性 渐变 的 标准 语法 如 下 所 示 : 
background: linear-gradient (direction, color-stopl, color-stop2, ...); 

direction 表 示 渐 变 的 方向 ，color-stop 表 示 渐 变 的 颜色 ， 线 性 渐变 至 少 需 要 两 种 以 上 颜色 
才能 实现 。 线 性 渐变 默认 从 上 到 下 渐变 ， 例 如 下 面 这 段 代码 : 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>14.17</title> 

<style> 

div { 

width:400px; 

height:80px; 

background: -webkit-linear-gradient (red, blue); 
background: -o-linear-gradient (red, blue); 
background: -moz-linear-gradient (red, blue); 
background: linear-gradient (red, blue); 
</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


这 上段 代码 根据 不 同 内 核 的 浏览 器 ， 设 置 了 多 种 情况 下 线性 渐变 的 效果 。 运 行 这 段 代 码 
效果 如 图 14.16 所 示 。 
对 于 从 左 到 右 的 渐变 ， 可 以 使 用 下 面 的 代码 ， 效 果 如 图 14.17 所 示 。 


background: -webkit-linear-gradient (left, red , blue); 
background: -o-linear-gradient (right, red, blue); 
background: -moz-linear-gradient (right, red, blue); 
background: linear-gradient (to right, red , blue); 
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图 14.16 图 14.17 



































在 设置 渐变 起 点 的 时 候 ， 可 以 设置 一 个 对 角 点 ， 这 样 就 可 以 创建 一 个 对 角 渐变 的 效果 。 
代码 如 下 ， 效 果 如 图 14.18 所 示 。 


上 























background: -webkit-1linear-gradient (left top, red ，blue) 
background: -o-linear-gradient (bottom right, red, blue); 

background: -moz-linear-gradient (bottom right, red, blue); 
background: linear-gradient (to bottom right, red , blue); 


另外 ， 还 可 以 将 渐变 起 点 设置 为 一 个 角度 ， 这 个 角度 是 指 水 平 线 和 渐变 线 之 间 的 角度 ， 
时 针 方向 计算 。 例 如 ，0deg 将 创建 一 个 从 下 到 上 的 渐变 ， 而 90deg 将 创建 一 个 从 左 到 右 的 
这 段 代 码 将 创建 一 个 30deg 的 线性 渐变 ， 效 果 如 图 14.19 所 示 。 












































下 


回 
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background: -webkit-linear-gradient (30deg, red, blue); 
background: -o-linear-gradient (30deg, red, blue); 
background: -moz-linear-gradient (30deg, red, blue); 
background: linear-gradient (30deg, red, blue); 







2417 x 
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14.18 图 14.19 
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14.6.2 径 向 渐变 









































向 渐变 的 语法 如 下 所 示 : 


COloOF)s 












































码 ， 运 行 后 的 效果 如 图 14.20 所 示 。 


background: -webkit-radial-gradient (red, green, blue); 
background: -o-radial-gradient (red, green, blue); 
background: -moz-radial-gradient (red, green, blue); 
background: radial-gradient (red, green, blue); 


如 果 要 改变 各 个 颜色 的 分 布 情况 ， 可 以 使 用 以 下 代码 ， 效 果 如 图 14.21 所 示 。 


background: -webkit-radial-gradient (red 5%, green 15%, blue 60%); 
background: -o-radial-gradient (red 5%, green 15%, blue 60%); 
background: -moz-radial-gradient (red 5%, green 15%, blue 60%); 
background: radial-gradient (red 5%, green 15%, blue 60%); 
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(dreamweaver ce 2.. HTML dreamweaver ce 2.. HTML 
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14.20 14.21 








四 














径 向 渐变 是 从 中 心 点 向 周围 渐变 。 默 认 情况 下 ， 渐 变 的 中 心 是 center (表示 在 中 心 点 ) ， 
渐变 的 形状 是 ellipse (表示 椭圆 形 ) ， 渐 变 的 大 小 是 farthest-corner (表示 到 最 远 的 角落 ) 。 径 























径 向 渐变 默认 的 渐变 形状 是 圆 形 (circle》， 当 然 还 可 以 通过 以 下 设置 将 其 改变 为 椭 区 























background: radial-gradient (center, shape size, start-color, ..., last- 


如 果 仅 仅 指定 渐变 的 颜色 ， 那 么 颜色 将 会 均匀 的 从 中 间 向 周围 渐变 。 例 如 下 面 这 段 代 


以 
Z 
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Cellipse) ， 效 果 如 图 14.22 所 示 。 


background: -webkit-radial-gradient (circle, red, yellow, green); 
background: -o-radial-gradient (circle, red, yellow, green); 
background: -moz-radial-gradient (circle, red, yellow, green); 
background: radial-gradient (circle, red, yellow, green); 


© 口 fieyVW/Cyxampp/htdocy14/14.18 三 
各 加 dreamweaver ce 2 站 HTML 








图 14.22 























径 向 渐变 中 的 size 参 数 用 于 设置 渐变 的 大 小 ， 它 有 4 种 取 值 ，closest-side 的 效果 如 图 14.23 
所 示 ，farthest-side 的 效果 如 图 14.24 所 示 ，closest-corner 的 效果 如 图 14.25 所 示 ，farthest-corner 
的 效果 如 图 14.26 所 示 。 


























漳 
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图 14.23 图 14.24 
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14.25 到 14.26 
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14.7 CSS 3 的 阴影 和 反射 效果 

















在 CSS 3 中 可 以 轻松 的 创建 阴影 效果 ， 创 建 阴影 的 时 候 需要 4 个 参数 ， 
第 3 个 参数 表示 阴影 的 模糊 半径 ， 





方向 上 的 阴影 ， 第 2 个 单数 表示 Y 轴 方向 上 的 阴影 ， 
数 表示 阴影 的 颜色 。 例 如 下 面 这 段 代码 ; 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>14.19</title> 
<style> 

divt{ 

width:100px; 

height:80px; 
background-color:#BBA6A7; 
box-shadow:5px 5px 5px rgba(0,64,128,0.3); 
} 

2 

text-shadow:5px 5px 5px rgba(64,64,64,0.5); 
} 

</style> 

</head> 

<body> 

<div></div> 
<h2> 文 字 阴影 </h2> 

</body> 

</html> 


这 段 代 码 中 分 别 为 <div> 元 素 和 <h2> 元 素 设 置 了 阴影 。 












































第 1 个 参数 表示 X 轴 
第 4 个 参 





同 的 是 ， 为 <div> 元 素 设置 阴影 






































的 是 text-shadow 属 性 。 运 行 





























的 时 候 用 的 是 box-shadow 属 性 ， tn 
这 上段 代码 后 ， 效 果 如 图 14.27 所 示 。 
D filey//C:/xampp/htdocs/14/14.19 
党 赤山 人 dreamweaver cc 2 站 HTML 
图 14.27 
使 用 CSS 3 还 可 以 创建 反射 效果 。 在 创建 反射 时 需要 指 
方向 ， 第 2 个 参数 是 反射 的 距离 。 例 如 下 面 这 段 代 码 : 




















定 两 个 


数 ， 


第 ] 个- 
第 11 


数 是 反射 的 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf=8"> 
<title>14.20</title> 

<style> 

hil{ 

-Webkit-box-reflect: below 5px 
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-webkit-gradient (linear, left top, left bottom, from(transparent), 


tolrgbal2557 255r 2557 O051)))s 
了 
</style> 
</head> 
<body> 
<h1> 文 字 阴影 </h1> 
</body> 
</html> 











部 


效果 如 图 14.28 所 示 。 











4 了 > G 





在 这 段 代码 中 ， 我 们 不 仅 为 文字 设置 了 反射 效果 ， 还 设置 了 透明 效果 。 运 行 这 段 代 码 


fley//C/xampp/htdocs/14/14.20 窑 三 


器 二 口 dmamweaver ce 2.. 站 HTML 


文字 阴 曙 





放 








图 14.28 











14.8 CSS 3 的 背景 效果 








CSS 3 中 新 增加 了 一 些 关 于 设置 背景 的 属性 ， 包 括 background-clip、background-origin 和 和 




















background-size， 这 些 属 性 可 以 帮助 
素 上 设置 多 种 背景 。 





14.8.1 background-clip 


户 创建 多 种 样式 的 背景 。 另 外 ，CSS 3 还 允许 在 一 个 元 




















该 属性 用 于 设置 背景 的 区 域 ， 其 默认 值 是 borderbox， 表 示 背 景 绘 制 在 边框 方 框 内 ， 另外 
还 可 以 设置 为 Padding-box， 表 示 背 景 绘制 在 内 边 距 的 方 框 内 ;如 果 设 置 为 content-box， 则 表 
示 背 景 绘 制 在 内 容 方 框 内 。 例 如 下 面 这 段 代码 : 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>14.21</title> 
<style> 

hif{ 

padding:50px; 
background-color:#B06667; 
background-clip:content-box; 
border:2px solid #C3181B; 
" 

</style> 

</head> 

<body> 

<h1> 这 里 是 内 容 区 域 </h1> 
</body> 

</html> 

















在 这 段 代码 中 ， 为 <h1> 元 素 设置 了 背景 ， 同 时 设置 背景 显示 区 域 为 内 容 区 域 ， 效 果 如 图 

















14.29 所 示 。 
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图 14.29 











14.8.2 background-origin 
































该 属性 











F 确 定 背 景 的 位 置 ， 它 通常 与 background-position 联 合 使 

















。 甸 


0 果 设 置 为 border- 





box 则 表示 从 border 开 始 计算 位 置 ， 如 果 设置 为 padding-box 则 表示 从 padding 开 始 计 算 位 置 ， 如 














果 设 置 为 content-box 则 表示 从 content 开 始 计算 位 置 。 例 如 下 面 这 段 代码 : 














<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>14.22</title> 
<style> 

hi{ 

padding:50px; 
background-image:url (img/img01.jpg); 
background-repeat:no-repeat; 
background-position:left; 
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background-origin:content-box; 
border:2px solid #C3181B; 

} 

</style> 

</head> 

<body> 

<h1> 这 里 是 内 容 区 域 </h1> 

</body> 

</html> 

















在 这 段 代 码 中 ，background-position 设 置 为 left，background-origin 设 置 为 content-box， 表 


示 背 景 从 内 容 区 域 的 左边 开始 显示 。 运 行 这 段 代 码 后， 效果 如 图 14.30 所 示 。 








人 © Dfiey//C/xampp/htdocs/14/14.22 窜 三 
澡 应 二 Ddreamweaver ce 2 站 HTML 











14.30 











14.8.3 background-size 














该 属性 用 于 调整 背景 图 片 的 大 小 。 如 果 设 置 为 contain， 那 么 将 缩小 





























片 以 适应 元 素 ， 同 











时 保持 像素 长 宽 比 ;如 果 设 置 为 vover， 将 扩展 图 片 以 填补 元 素 ， 同 时 保持 像素 长 宽 比 ， 如 果 
设置 为 两 个 具体 长 度 ， 如 background-size: 100px 100px， 图 片 将 被 缩放 到 指定 的 尺寸 ， 如 果 设 





置 为 百分比 ， 如 background-size: 50% 100%， 图 片 将 被 缩放 到 指定 的 大 小 ， 百 分 比 是 相对 于 











包含 元 素 的 尺寸 。 例 如 下 面 这 段 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>14.23</title> 
<style> 

hl{ 

padding:50px; 
background-image:url (img/img01 .jpg); 
background-repeat :no-repeat; 
background-size:contain; 
border:2px solid #C3181B7 

¥ 

</style> 

</head> 

<body> 

<h1> 这 里 是 内 容 区 域 </h1> 























239 





QQ、 | 网 站 制作 、 发 布 与 维护 技术 实战 





</body> 
</html> 


运行 这 段 代码 后 ， 效 果 如 图 14.31 所 示 。 
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:应 肌 [dreamweaver ce 2.， 站 HTML 


ET 


14.31 
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14.8.4 设置 多 个 背景 


在 CSS 3 中 人 允许 为 同一 个 元 素 设置 多 个 不 同 的 背景 ， 例 如 下 面 这 段 代 码 ; 





























<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>14.24</title> 

<style> 

hli 

padding:50px; 

border:2px solid #C3181B; 

background:url (img/img01.jpg) 1l0px center no-repeat, url (img/img02.jpg) 
10px center repeat-x; 

上 

</style> 

</head> 

<body> 

<h1> 这 里 是 内 容 区 域 </h1> 

</body> 

</html> 


在 这 段 代码 中 ， 使 用 background 属 性 为 <hl> 元 素 设置 了 两 个 背景 图 片 ， 效 果 如 








出 





14.32 所 示 。 
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次 代码 ， 


创建 一 


片 尺寸 及 相关 脚本 功 





个 在 不 同 终端 设 


向 应 式 网 站 设计 的 案例 。 
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图 15.3 








图 














15.1 页 面 是 全 屏 显示 的 效果 ， 我 们 


























可 以 看 到 网 站 的 导航 菜 半 














图 15.4 











Eg 有 很 多 ， 





背景 图 片 只 显示 


































































































































































































了 部 分 图 像 ， 而 图 15.2 是 缩放 浏览 器 现 的 效果 ， 导 航 菜单 已 经 发 生 了 变化 ， 背 景 图 片 
也 显示 了 更 多 的 范围 ， 图 像 上 面 的 文字 也 变 得 更 大 了 。 这 些 区 别 都 是 由 于 改变 浏览 器 窗口 而 
发 生 了 变化 ， 这 就 是 响应 式 Web 设 计 带 给 我 们 的 惊喜 。 

我 们 再 看 图 15.3 所 示 页 面 的 效果 ， 页 面 的 主体 文字 被 一 条 垂直 的 直线 分 成 两 个 部 分 ， 缩 
放 浏 览 器 窗口 后 原来 左右 排列 的 内 容 现 在 自动 呈现 为 上 下 结构 ， 效 果 如 图 15.4 所 示 ， 这 同样 


也 是 响 












































应 式 Web 设 计 带 给 我 们 的 惊喜 
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人 .2 响应 式 Web 设 计 的 优势 











站 将 是 




















移动 设备 最 理想 的 访问 站 点 ， 
. 成 本 优势 
前 很 多 网 站 为 了 适应 不 同 设备 的 浏览 ， 





于 技术 上 的 进步 ， 从 移动 设备 上 访问 网 站 的 数量 越 来 越 多 ， 基 了 














在 开发 、 维 护 和 运营 上 投入 更 多 的 成 本 。 











进行 了 一 
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响应 式 Web 设 计 的 网 站 ， 











动 设备 新 的 尺寸 








些 不 同 的 设计 ， 所 以 在 开 
. 兼容 性 优势 





会 针对 不 同 的 设备 开 


因为 它 具 有 以 下 一 些 优势 。 








F 响 应 式 Web 设 计 的 网 


发 多 个 版 本 ， 这 样 做 的 结 


只 有 一 个 页 面 ， 只 是 针对 不 同 的 分 辨 率 、 不 同 的 设备 环境 
发 、 维 护 和 运营 上 ， 能 有 效 节约 成 本 。 











层出不穷 ， 0 
变化 较 大 ， 则 往往 不 能 兼容 ， 而 开发 新 的 版 本 需 


是 响应 式 Web 设 计 可 以 提前 预防 这 个 问题 。 


操作 灵活 




















应 式 设计 是 针对 页 面 的， 可 











以 只 对 必要 的 页 





机 进行 改动 ， 其 他 页 








对 间 ， 这 段 时 





F 某 些 规格 的 设备 。 如 果 新 的 设备 
间 内 的 访问 就 是 个 问 





理 








` 受 影响 。 
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响应 式 Web 设 计 虽 然 灵活 性 强 ， 可 以 适应 不 同 分 辩 率 的 设备 ， 但 是 它 的 缺点 也 是 显而易见 
的 。 为 了 兼容 各 种 设备 ， 就 需要 不 断 扩展 代码 ， 最 终 导 致 代码 爱 肿 ， 而 且 页 面 加 载 的 时 间 也 会 
比较 长 。 所 以 ， 针 对 项 目的 实际 情况 ， 有 选择 的 采用 响应 式 Web 设 计 是 比较 推荐 的 选择 。 










































































全.3 制作 响应 式 Web 设 计 的 方法 





在 制作 响应 式 Web 设 计 的 时 候 ， 我 们 应 该 遵循 以 下 设计 流程 。 


(1) 确定 需要 兼容 的 设备 类 型 、 屏 幕 尺寸 :调查 研究 用 户 使 用 各 种 设备 的 分 布 情况 ， 
确定 需要 兼容 哪些 设备 ， 哪 些 尺 寸 。 


目前 市 面 上 的 移动 设备 和 平板 电脑 的 种 类 都 很 多 ， 而 且 大 多 具有 不 同 的 屏幕 尺寸 ,pc 机 
显示 器 的 尺寸 也 分 了 很 多 种 。 在 设计 响应 式 Web 设 计 的 时 候 ， 要 充分 考虑 到 手势 功能 、 屏 幕 
寸 、 横 向 和 竖 向 、 普 通电 脑 屏幕 和 宽屏 的 设计 。 

对 于 现 有 的 网 站 ， 并 非 需要 将 网 站 上 所 有 的 页 面 都 设计 为 响应 式 Web 页 面 ， 仪 需要 将 移 
动 设备 可 能 访问 比较 频繁 的 页 面 设计 为 响应 式 Web 页 面 即 可 。 


(2) 制作 线 框 原型 :针对 确定 下 来 的 几 个 尺寸 分 别 制作 不 同 的 线 框 原型 。 需 要 考虑 清 
楚 在 不 同 尺寸 下 ， 页 面 的 布局 如 何 变 化 ， 内 容 尺 寸 如 何 缩放 ， 功 能 、 内 容 如 何 删 减 ， 甚 至 针 
对 特殊 的 环境 作 特 殊 化 的 设计 等 。 这 个 过 程 需要 设计 师 和 前 端 开发 人 员 保持 密切 沟通 。 
(3) 测试 线 框 原 型 ， 将 图 片 导 入 到 相应 的 设备 进行 一 些 简单 的 测试 ， 可 帮助 我 们 尽早 
发 现在 可 访问 性 、 可 读 性 等 方面 存在 的 问题 。 
(4) 视觉 设计 : 移动 设备 的 屏幕 像素 密度 与 传统 电脑 屏幕 不 一 样 ， 在 设计 的 时 候 需 要 
保证 内 容 文字 的 可 读 性 、 控 件 可 点 击 区 域 的 面积 等 。 
(5) 前 端 实现 : 与 传统 的 web 开 发 相 比 ， 响 应 式 设计 的 页 面 由 于 页 面 布局 、 内 容 尺 寸 发 
生 了 变化 ， 所 以 最 终 的 产 出 更 有 可 能 与 设计 稿 出 入 较 大 ， 需 要 前 端 开 发 人 员 和 设计 师 多 沟通 。 











































































































































































































































































































































































































便 汉 视 口 和 屏幕 尺寸 














视 口 是 指 浏览 器 窗口 内 的 内 容 区 域 。 例 如 可 以 按 下 F12 功 能 键 ， 打 开 谷歌 浏览 器 的 开发 
具 界 面 ， 然 后 点 击 如 图 15.5 所 示 图 形 左下 角 的 手机 图 标 按钮 ， 打 开 视 口 调试 窗口 。 这 个 
内 显示 的 区 域 就 是 视 口 ， 可 以 使 用 鼠标 拉 什 视 口 的 边缘 改变 视 口 的 大 小 ， 或 者 直接 在 视 
左上 角 的 设备 〈Device) 下拉 框 中 选择 指定 的 设备 ， 以 便 确定 视 口 的 大 小 。 
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屏幕 尺寸 指 的 是 设备 的 物理 显示 区 域 ， 也 就 是 用 户 屏 幕 的 整体 大 小 ， 它 与 视 口 是 两 个 不 
同 的 概念 。 














人 .5 媒体 查询 


HTML 中 的 <link> 标 签 有 一 个 media 的 属性 ， 该 属性 为 样式 表 指 定 设备 的 类 型 ， 例 如 以 下 
两 段 代 码 : 


<link rel="stylesheet" type="text/css" media="screen" href="screen.css" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 


这 两 行 代码 同时 出 现在 一 个 HTML 页 面 中 ， 为 不 同 的 设备 指定 加 载 不 同 的 样式 文件 。 第 
行 代码 表示 页 面 显 示 在 屏幕 上 时 ， 使 用 screen.css 这 个 样式 文件 ， 而 打印 这 个 页 面 时 ， 使 
print.css 这 个 样式 文件 。 


























































































































在 CSS 3 中 ， 媒 体 查询 (Media Query) 可 以 设置 不 同类 型 的 媒体 条 件 ， 并 根据 不 同 的 条 
件 指定 不 同 的 样式 文件 。 可 以 将 媒体 查询 语句 看 成 是 一 个 表达 式 ， 当 表达 式 满足 不 同 条 件 











时 ， 应 用 不 同 的 样式 。 表 15.1 列 出 了 媒体 查询 中 不 同 条 件 的 媒体 功能 。 
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表 15.1 
功能 最 大 /最 小 值 描述 
width 显示 区 域 的 宽度 
height 显示 区 域 的 高 度 
device-width 设备 的 宽度 
device-height 设备 的 高 度 
orientation portrait 或 landscape 设备 的 方向 
aspect-ratio 宽度 比 ( 宽 /高 ) 设备 的 宽 高 比 ， 使 用 由 1 





个 斜 杠 分 开 的 两 个 整 
表示 (比如 16/9) 

设备 宽度 与 设备 高 度 的 
比率 
每 种 颜色 成 分 的 位 数 
(如 果 不 是 颜色 ,该 值 
为 0) 
每 种 颜色 成 分 的 位 数 
(如 果 不 是 颜色 ， 该 值 
为 0) 

输出 设备 的 颜色 并 查找 
表 中 的 项 数 
输出 设备 的 像 票 密度， 
表示 为 整数 后 跟 dpi (每 
英寸 点 数 ) 或 dpcm (每 
厘米 点 数 ) 

scan Progressive 或 interlace TV 设备 使 用 的 扫描 过 程 
grid 0 或 1 如 果 设 置 为 1， 设 备 基 于 
网 格 ， 比 如 电 传 类 型 的 
终端 或 仅 有 一 种 固定 字 
体 的 电话 显示 设备 (所 
有 其 他 设备 均 为 0) 





device-aspect-ratio 


color 


color-index 








monochrome 








resolution 

















例如 ， 我 们 需要 为 一 个 纵向 显示 的 屏幕 设置 样式 ， 可 以 使 用 以 下 的 代码 ; 


<link rel="stylesheet" type="text/css" media="screen and 
(orientation:portrait)" href="screen portrait.css" /> 


如 果 要 为 一 个 横向 显示 的 屏幕 设置 样式 ， 可 以 使 用 以 下 的 代码 : 


<link rel="stylesheet" type="text/css" media="screen and (orientation: 
landscape)" href="screen landscape.css" /> 


或 者 在 媒体 查询 纵向 样式 的 前 面 添加 aot 关键 字 ， 例 如 下 面 的 代码 : 


<link rel="stylesheet" type="text/css" media="not screen and 
(orientation:portrait)" href="screen landscape.css" /> 
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(orientation:portrait) and (min-width:550px) 


























在 一 个 媒体 查询 条 件 中 ， 可 以 设置 多 个 查询 条 件 ， 多 个 查询 条 件 之 间 用 and 关 键 
例如 查询 视 口 宽度 大 于 550px 的 纵向 屏幕 ， 可 以 设置 以 下 媒体 查询 条 件 : 


<link rel="stylesheet" type="text/css" media="not scre 























spt 


以 上 介绍 的 是 使 用 多 个 样式 表 文件 时 媒体 查询 的 使 用 方法 ， 但 是 这 种 方法 会 导致 开发 









































字 连 接 。 





en and 


"” href="screen portrait width550 . 
























































































































































人 员 分 别 存储 多 套 样 式 表 文件 ， 当 需要 修改 样式 的 时 候 ， 会 显得 非常 麻烦 ， 而 且 页 面 在 加 载 
多 个 样式 表 的 时 候 ， 会 因为 重复 访问 而 降低 加 载 速度 。 所 以 ， 笔 者 推荐 的 方法 是 在 统一 一 个 
样式 表 中 ， 将 多 套 媒 体 查询 集中 写 在 一 起 ， 这 样 当 需要 修改 的 时 候 ， 可 以 非常 方便 地 定 人 
标 ， 而 且 不 容易 遗漏 。 例 如 在 下 面 的 代码 中 ， 通 过 媒体 查询 设置 浏览 器 在 不 同 尺 寸 视 口 时， 
页 面 中 字体 的 大 小 变化 效果 。 运 行 该 页 面 ， 调 整 浏览 器 窗口 的 宽度 ， 可 以 看 到 字体 的 变化 效 
果 ， 如 图 15.6 所 示 。 














<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>15.1</title> 

<style> 

body { 

font-size:36px; text-align:center; font-weight:bold; 
1 

@media screen and (max-width: 960px) { 

body { 

font-size:24px; text-align:center; font-weight:bold; 
上 

是 

@media screen and (max-width: 768px) { 

body { 

font-size:20px; text-align:center; font-weight:bold; 
. 

i: 

@media screen and (max-width: 550px) { 

body { 

font-size:16px; text-align:center; font-weight:bold; 
3 

3 

@media screen and (max-width: 320px) { 

body { 

font-size:9px; text-align:center; font-weight:bold; 
了 

和 

</style> 

</head> 

<body> 

<div> 这 段 文字 的 大 小 会 根据 浏览 器 窗口 的 变化 做 出 相应 的 调整 </div> 
</body> 

</html> 
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TENCAampp/htdocv1S/15Lhtml 





上 274 x 
¢ 3 © Die//Champp/htdocs/15/15 Lhtml 
ER de 2 CHIME 


这 段 文字 的 大 小 会 根据 浏览 器 窗口 的 变化 做 出 相应 的 调整 


Ea 


所 3 C Dfie//CMampp/htdocs/15/151html 
这 emer 2 口 MTML 


这 段 文字 的 大 小 会 根据 浏览 避 座 口 的 变化 做 出 相应 的 调整 

















鸽 .6 响应 式 图 片 


er 











在 编写 CSS 代 码 的 时 候 ， 如 果 要 指定 一 个 图 像 的 尺寸 ， 可 以 使 用 像素 (px) 为 单位 ， 也 
可 以 使 用 百分比 。 如 果 使 用 像素 为 单位 ， 那 么 无 论 怎 么 调整 视 口 ， 图 像 的 大 小 都 不 会 发 生变 
化 ; 如 果 使 用 百分比 来 设置 图 像 ， 当 调整 视 口 的 大 小 时 ， 图 像 的 尺寸 也 会 随 着 变化 。 但 是 ， 
如 果 视 口 尺 寸 大 于 图 像 的 原始 尺寸 ， 图 像 就 会 变形 。 为 了 让 图 像 保持 最 大 原始 尺寸 ， 可 以 通 
过 以 下 代码 设置 。 






































































































































img{max-width:300px;} 


图 像 实现 了 弹性 拉 伸 ， 但 这 并 不 是 响应 式 图 片 的 真正 含义 。 响 应 式 图 片 是 指 根据 设备 的 
屏幕 尺寸 提供 不 同 的 图 片 ， 当 切换 设备 的 时 候 ， 能 够 正确 显示 对 应 尺寸 的 图 片 。 
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动态 网 站 的 
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， 而 服务 











站 内 容 可 以 根据 不 同 的 情况 进行 变更 ， 通 常情 况 下 是 指 客户 端 与 服务 端 可 
以 进行 交互 的 一 种 网 站 ， 客 户 端 是 指 Web 页 


端 多 为 数据 库 架 构 。 所 以 动态 网 站 不 














仅 包 括 客户 端的 


页 设计 ， 而 且 还 需要 通过 数据 库 和 编程 来 对 网 站 内 





容 进 行 更 新 。 


16:1 动态 网 站 开发 基础 





























前 几乎 所 有 的 网 站 都 是 动态 网 站 。 


因 








为 有 了 动态 











网 站 ， 才 使 














户 与 Web 页 





























的 交互 ， 才 会 有 





多 
16.1.1 功能 特点 


新 颖 的 网 站 涌现 出 来 ， 从 而 不 断 





推动 互联 网 技术 向 新 的 方向 








发 








动态 网 站 之 所 以 成 为 
(1) 动态 网 站 可 以 实 
(2) 动态 
(3) 动态 























前 互联 网 发 
现 交互 功能 ， 如 用 
页 需要 客户 端 浏 览 器 发 出 请 求 
页 的 后 缀 名 一 般 是 jsp、asp、php 等 。 








展 的 方向 ， 这 是 


办 


为 它 具 有 以 下 几 个 特点 : 

















户 注 册 、 信 


后 才能 实 











息 发 布 、 产 品 
岗 交 互 。 



































态 网 页 ， 动 态 网 页 也 可 以 使 
是 判断 网 站 是 静态 或 动态 的 唯一 标准 。 


























(4) 动态 网 站 因 
(5) 搜索 引擎 对 


16.1.1 开发 语言 








为 需要 与 数据 库 交 互 ， 所 以 访问 速 






































于 动态 网 站 开发 
做 一 个 简单 的 介绍 。 


用 
H 








的 i 


语 








局 











下 





9 








非 所 有 后 缀 名 为 HTML 的 网 页 都 是 静 


URL 静 态 化 技术 ， 使 网 页 后 缀 显示 为 HTML。 所 以 后 缀 名 并 非 








度 受到 一 定 影响 。 


页 的 收录 相对 静态 网 页 要 弱 一 些 。 


主要 有 4 种 ，ASP、ASPNET、PHP 和 JSP。 关 于 这 4 种 语 





(1) ASP 是 Active Server Pages (动态 服务 器 网 页 ) 的 简称 ， 它 是 微软 开发 的 一 种 类 似 超 





文本 标识 语言 (HTML)、 


























基本 (Script 与 公 


网 关 接 


(CGI) 的 结合 体 ， 它 没有 提供 











己 专 门 




















的 编程 语言 ， 而 是 允许 








户 使 











许多 已 有 的 脚本 语言 编写 ASP 的 应 

















程序 。ASP 的 程序 编制 
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比 HTML 更 方便 且 更 有 灵活 性 。ASP 是 在 Web 服 务 器 端 运行 ， 运 行 后 再 将 运行 结果 以 HTML 格 
式 传送 至 客户 端的 浏览 器 。 因 此 ， 与 一 般 的 脚本 语言 相 比 ，ASP 要 安全 得 多 。 

ASP 的 最 大 好 处 是 可 以 包含 HTML 标 签 ， 也 可 以 直接 存 取 数 据 库 及 使 用 无 限 扩充 的 
ActiveX 控 件 ， 因 此 在 程序 编制 上 要 比 HITML 方 便 而 且 更 富有 灵活 性 。 通 过 使 用 ASP 的 组 件 和 
对 象 技术 ， 用 户 可 以 直接 使 用 ActiveX 控 件 ， 调 用 对 象 方法 和 属性 ， 以 简单 的 方式 实现 强大 的 
交互 功能 。 
但 ASP 技 术 也 非 完美 无 缺 ， 由 于 它 基 本 上 局 限于 微软 的 操作 系统 平台 之 上 ， 主 要 工作 环 
境 是 微软 的 IIS 应 用 程序 结构 ， 又 因 ActiveX 对 象 具有 平台 特性 ， 所 以 ASP 技 术 实现 在 跨 平台 
Web 服 务 器 上 工作 不 是 很 容易 。 


(2) ASP NET 的 前 身 ASP 技 术 ， 是 在 IIS 2.0 上 首次 推出 的 ， 当 时 与 ADO 1.0 一 起 推出 
在 IIS 3.0 上 成 为 服务 器 端 应 用 程序 的 热门 开发 工具 ， 微 软 还 特别 为 它 量 身 打 造 了 VisualInter 
Dev 开 发 工具 。 在 1994 年 到 2000 年 之 间 ，ASP 技 术 已 经 成 为 微软 推展 Windows NT 4.0 平 台 的 关 
键 技术 之 一 ， 数 以 万 计 的 ASP 网 站 也 是 从 这 个 时 候 开始 如 雨后春笋 般 地 出 现在 网 络 上 。ASP 
的 简单 并 且 高 度 可 定制 化 的 能 力 ， 也 是 它 能 迅速 崛起 的 原因 之 一 。 不 过 ASP 的 缺点 也 逐渐 浮 
现 出 来 。 面 向 过 程 型 的 程序 开发 方法 ， 让 维护 的 难度 提高 很 多 ， 尤 其 是 大 型 的 ASP 应 用 程 
序 。 解释 型 的 VBScript 或 JScript 语 言 ， 让 性 能 无 法 完全 发 挥 ， 扩展 性 由 于 其 基础 架构 的 不 足 
， 昌 然 有 有 COM 元 件 可 用 ， 但 开发 一 些 特殊 功能 (如 文件 上 传 ) 时 ， 没 有 来 自 内 置 的 支 
需要 寻求 第 三 方 控件 商 的 控件 。 
(3) PHP 也 称 为 Hypertext Preprocessor ( 超 文 本 预 处 理 器 ) ， 它 是 当今 Internet 上 最 为 火 
热 的 脚本 语言 ， 其 语法 借鉴 了 C、Java、PERL 等 语言 ， 只 需要 很 少 的 编程 知识 你 就 能 使 
PHP 建 立 一 个 真正 交互 的 Web 站 点 。 


PHP 与 HTML 语 言 具有 非常 好 的 兼容 性 ， 使 用 者 可 以 直接 在 脚本 代码 中 加 入 HTML 标 
签 ， 或 者 在 HTML 标 签 中 加 入 脚本 代码 从 而 更 好 地 实现 页 面 控 制 。PHP 提 供 了 标准 的 数据 库 
交口 ， 数 据 库 连接 方便 、 兼 容 性 强 、 扩 展 性 强 ， 可 以 进行 面向 对 象 编程 。 


(4) JSP 也 称 Java Server Pages (java 服 务 器 页 面 ) ， 它 是 由 Sun Microsystems 公 司 于 1999 
E6 月 推出 的 新 技术 ， 是 基于 Java Servlet 以 及 整个 Java 体 系 的 Web 开 发 技术 。 


JSP 和 ASP 在 技术 方面 有 许多 相似 之 处 ， 不 过 两 者 来 源 于 不 同 的 技术 规范 组 织 。ASP 一 般 
只 应 用 于 Windows NT/2000 平 台 ， 而 JSP 可 以 在 85% 以 上 的 服务 器 上 运行 ， 而 且 基 于 JSP 技 术 的 
应 用 程序 比 基 于 ASP 的 应 用 程序 易于 维护 和 管理 ， 所 以 被 许多 人 认为 是 未 来 最 有 发 展 前 途 的 
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16.2 PHP 语 言 入 门 

















PHP 脚 本 语言 的 语法 结构 与 C 语 言 和 Perl 语 言 的 语法 风格 非常 相似 。 用 户 在 使 用 变量 前 不 
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需要 对 变量 进行 声明 。 使 用 PHP 创 建 数组 的 过 程 也 非常 简单 。PHP 还 具有 基本 的 面向 对 象 组 
件 功能 ， 可 以 极 大 地 方便 用 户 有 效 组 织 和 封装 自己 编写 的 代码 。 
16.2.1 PHP 代 码 书写 

PHP 代 码 标注 的 书写 格式 以 <?php 开 始 ， 以 ?> 结束 ， 例 如 下 面 这 段 代码 : 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>16.1</title> 

</head> 

<body> 

<?php 

echo "这 是 第 一 个 PHP 案 例 ! "; 

和 之 

</body> 

</html> 

在 这 段 代码 中 ， 我 们 可 以 看 到 在 HTML 页 面 的 <body> 元 素 中 有 一 段 php 代 码 ， 其 中 echo 在 
php 中 表示 输出 的 意思 。 运 行 这 段 代码 后 ， 效 果 如 图 16.1 所 示 。 





国 is1 


4 © Dlocalhost/16/16.1.php 
尘 应 用 [0 dreamweaver cc 2..， 站 HTML 


这 是 第 一 个 PHP 案 例 ! 











图 16.1 











除 此 之 外 ，PHP 代 码 还 有 一 种 简写 方法 。 例 如 ， 
完全 相同 ， 不 同 的 是 这 段 代 码 中 省 略 了 php 三 个 字母 ， 
<? 


echo "这 是 第 一 个 PHP 案 例 ! "; 


本 





上 下面 
这 称 之 为 PHP 的 简写 风格 。 





这 段 代码 与 上 面 案 例 中 代码 的 效果 






































另外 ，PHP 还 可 以 像 JavaScript 语 言 那样 ， 使 用 script 进 行 声明 ， 这 种 写法 如 下 所 示 : 


<script language="php"> 
echo "这 是 第 一 个 PHP 案 例 ! "; 


</script> 


虽然 PHP 代 码 有 多 种 写法 ， 但 是 为 了 达到 更 好 的 兼容 性 ， 我 们 推荐 使 



































推荐 使 用 剪 短 风格 。 
16.2.2 PHP 代 码 注 释 
每 一 种 编程 语言 都 有 自己 的 注释 方法 。 在 PHPH 






































标准 风格 ， 而 不 


























ph， 使 用 “//” 来 编写 和 E 释 ， 使 





PF 休 妆 
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人 / 汪 。 


代码 的 上 方 或 右 方 ， 不 应 该 与 代码 混 写 ， 而 且 沪 





"*/” 来 编写 多 行 注释 ， 也 可 以 使 用 “#” 来 
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E 意 的 是 ， 注 














代码 : 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>16.2</title> 

</head> 

<body> 

<?php 

// 这 里 是 PHP 的 单行 注释 内 容 

/* 

这 里 是 PHP 的 多 行 注释 内 容 ， 注 释 的 内 容 
都 不 会 显示 在 页 面 上 。 

echo "注释 的 内 容 不 会 显示 出 来 。"; 
2 

</body> 

</html> 




















运行 这 段 代 码 后 ， 页 面 上 只 会 显示 echo 输 出 的 内 容 ， 其 他 注释 的 内 容 不 会 显示 在 
效果 如 图 16.2 所 示 。 
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所 © BD localhost/16/16.2.php 
洪 应 用 dreamweaver cc 2... HTML 


注释 的 内 容 不 会 显示 出 来 。 


.2.3 PHP 输 出 函数 
PHP 中 总 共有 4 类 输出 函数 ， 分 别 是 echo() 函 数 、print() 函 数 、printtO 函 数 和 sprintfO 函 

















数 ， 这 些 函数 各 自 都 有 不 同 的 用 法 。 


情况 下 ， 我 们 直接 省 略 圆 括号 ， 例 如 下 面 这 段 代 码 : 




















1. echo() 函 数 
echo0) 函 数 用 于 输出 一 个 或 多 个 字符 串 

















图 16.2 


释 的 内 容 应 该 写 在 














FE 释 的 内 容 不 会 显示 在 页 面 上 。 例 如 下 








面 这 段 
















































































<?php 
echo (" 带 圆 括 号 输出 内 容 。") ; 














可 值 。 


可 以 














ED 








括号 ， 也 可 以 不 
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2. print() 函 数 


printO 函 数 用 于 输出 一 个 或 多 个 字符 串 ， 执 行 成 功 时 返回 1， 执 行 失 败 时 返回 false。 与 
echo 函 数 一 样 ，printO 函 数 也 可 以 省 略 圆 括号 。 例 如 下 面 这 段 代 码 : 

<?php 

print (" 带 圆 括号 输出 内 容 。<br>") 7 

print "不 带 圆 括号 输出 内 容 。<br>" : 

echo Print " 带 返 回 值 输出 。" ; 

党 > 

运行 这 段 代码 后 ， 效 果 如 图 16.3 所 示 。 在 第 3 行 输 出 的 内 容 后 面 有 一 个 1， 这 是 因为 第 3 行 
使 用 了 两 个 输出 函数 ，print 函 数 先 输出 了 内 容 ， 返 回 了 一 个 1， 然 后 echo 函 数 又 将 全 部 内 容 
输出 。 
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洪 应 二 | dreamweaver cc 2.， 吕 HTML 


项 因 括 号 输出 内 容 。 


人 入 出 内 容 。 

















3. printf() 函 数 


printfO) 函 数 用 于 输出 格式 化 的 字符 串 。 其 中 格式 化 字符 串 包 括 两 部 分 内 容 ， 一 部 分 是 正 
常 字符 ， 这 些 字 符 将 按 原样 输出 ; 另 一 部 分 是 格式 化 规定 的 字符 ， 这 些 字符 以 百 分 号 〈%) 






























































始 ， 后 面 跟 一 个 或 几 个 规定 的 字符 ， 用 来 确定 输出 内 容 格 式 。 这 些 规 定 的 字符 如 表 16.1 所 示 。 
表 16.1 































整数 转 二 进 制 
整数 转 ASCII 码 
整数 转 有 符号 十 进 制 
双 精 度 转 浮 点 
整数 转 八 进 制 
整数 转 字 符 串 
束 数 转 无 符号 十 进 制 
整数 转 十 六 进 制 ( 小 写 ) 
整数 转 十 六 进 制 ( 大 写 ) 


在 格式 化 输出 时 ， 需 要 指定 转换 符号 和 对 应 的 参数 ， 而 且 每 一 个 转换 符号 和 对 应 的 参数 
都 必须 一 一 对 应 ， 多 个 参数 之 间 用 逗号 隔 开 ， 如 果 对 应 出 错 ， 会 出 现 意 想 不 到 的 错误 。 例 如 
下 面 这 段 代码 : 


<!doctype html> 
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<html> 

<head> 

<meta charset="utf-=8"> 
<title>16.5</title> 
</head> 

<body> 

<?php 

$name=" 小 明 "; 

$age=12; 

printf ("%s 过 完 年 就 su 岁 了 。", $name, $age); 
区 > 

</body> 

</html> 


在 这 段 代 码 中 使 用 了 两 个 转换 符号 ，%s 对 应 变量 $name，%u 对 应 变量 $age， 他 们 是 一 一 
对 应 的 关系 。 运 行 这 段 代 码 后， 效果 如 图 16.4 所 示 。 
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小 明 过 完 年 就 12 岁 了 。 








16.4 


























printf 函 数 有 一 个 返回 值 ， 表 示 输 出 字符 串 的 函数 。 要 想得到 这 个 返回 值 ， 需 要 使 用 each 
函数 将 其 输出 ， 相 关 代 码 如 下 所 示 : 

echo printf("%s 过 完 年 就 su 岁 了 。", $name, $age); 

刷新 页 面 后 ， 效 果 如 图 16.5 所 示 ， 后 面 多 出 来 的 29 就 是 前 面 字符 串 的 长 度 。 需 要 说 明 的 
是 ， 一 般 情况 下 我 们 认为 一 个 汉字 是 两 个 字 节 长 度 ， 但 是 在 编码 为 tf8 时 ， 一 个 汉字 的 长 度 
可 能 是 2~3 个 字 节 ， 因 为 它 是 边 长 编码 。 
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小 明 过 完 年 就 12 岁 了 。29 

















4. sprintf() 函 数 


sprintf() 函 数 与 printf0) 函 数 类 似 ，printf0 函 数 的 返回 值 是 字符 串 的 长 度 ， 而 sprintf0) 函 数 的 
返回 值 是 字符 串 本 身 。 因 此 ，sprinttO) 函 数 必须 通过 echo 才 能 输出 。 例 如 下 面 这 段 代 码 ; 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>16.6</title> 
</head> 

<body> 

<?php 

$name=" 小 明 "; 

$age=12; 

echo sprintf ("$s 过 完 年 就 su 岁 了 。", Sname, $age); 
区 2 

</body> 

</html> 


如 果 这 里 省 略 了 echo 函 数 ， 那 么 页 面 上 将 无 法 输出 任何 内 容 。 运 行 这 段 代 码 后 ， 效 果 如 
图 16.4 所 示 。sprintf0) 函 数 常用 于 数值 转换 ， 例 如 将 十 进 制 数 转换 为 二 进 制 数 ， 可 以 执行 以 下 
代码 : 

<?php 

$number=23; 


echo sprintf("%b", $number); 
人 


效果 如 图 16.6 所 示 。 
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1 dreamweaver ce 2.. HTML 





图 16.6 


16.2.4 PHP 变 量 









































变量 是 计算 机 编程 中 一 个 非常 重要 的 概念 。 变 量 可 以 用 来 存储 数字 、 文 本 字符 串 或 数 
组 。 简 单 地 说 ， 变 量 可 以 表示 程序 所 需 的 任何 信息 ， 而 且 变 量 一 旦 声明 ， 还 可 以 重复 使 用 。 
在 PHP 中 ， 变 量 的 声明 必须 以 $ 符 号 开始 ， 然 后 才能 声明 变量 名 。 
1. 变量 命名 规范 
在 PHP 中 ， 变 量 的 命名 必须 要 遵循 一 定 的 命名 规范 ， 具 体 要 求 如 下 所 示 : 


(1) 变量 名 必须 以 字母 或 者 下 划 线 (_) 开头 ， 后 面 跟 上 任意 字母 、 数 字 或 者 下 划 线 。 
(2) 变量 名 不 能 以 数字 开头 ， 中 间 不 能 有 空格 及 运算 符 。 
(3) 变量 名 严格 区 分 大 小 写 ， 即 SName 与 Sname 是 不 同 的 变量 。 

(4) 为 避免 命名 冲突 ， 不 允许 使 用 与 PHP 内 置 的 函数 相同 的 名 称 。 
(5) 在 为 变量 命名 时 ， 尽 量 使 用 有 意义 的 字符 捉 。 
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为 变量 赋值 有 两 种 方式 : 传 值 赋值 和 引用 赋值 。 这 两 种 赋值 方式 在 对 数据 的 处 理 上 存在 


很 大 差别 。 


(1) 传 值 赋值 : 这 种 赋值 方式 直接 使 用 

















变量 ， 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>16.7</title> 
</head> 

<body> 

<?php 

$numA=25; 

$numB=$numA; 

$numB=33; 

echo "变量 numA 的 值 为 ". $numA."<br>" 
echo "变量 numB 的 值 为 ". $numB; 
?> 

</body> 

</html> 


在 这 段 代 码 中 ， 当 执行 “$numA=25” 








间 ， 并 将 数值 “25” 存 储 在 这 个 空间 当 执 





量 numB 开 
的 存储 空 
337 ， 

图 16.7 所 示 。 


如 








国 167 
< 
让 应 用 
变量 numA 的 值 为 25 


变量 numB 的 值 为 33 








这 两 个 变量 任何 一 个 值 的 改变 都 不 会 影响 到 另 一 个 变量 的 值 。 例 如 下 兢 


了 








图 








对 ， 
行 “$numB=$numA” 时 ， 系 统 会 在 内 存 中 为 变 
个 存储 空间 ， 并 将 变量 numA 所 指向 的 存储 空间 的 内 容 复制 到 变量 numB 所 指向 
间 ， 当 执行 “SnumB-33” 时 ， 系 统 将 变量 numB 所 指向 的 存储 空间 保存 的 值 更 改 为 
而 变量 numA 所 指向 的 存储 空间 保存 的 值 仍 然 是 “25”。 





个 等 号 将 


个 变量 或 表达 式 的 值 赋 给 另 一 个 
这 段 代码 : 














系统 会 在 内 存 中 》 








变量 num 人 A 开辟 一 个 存储 空 











运行 这 段 代码 后 ， 效 果 如 


GC Dlocalhost/16/16.7.php 
了 dreamweaver cc 2... DD HTML 





16.7 


个 恋 














(2) 引用 赋值 : 引 


是 等 号 右边 的 变量 前 面 需要 加 上 一 个 “&” 






































赋值 也 是 直接 使 用 





符 


个 等 号 将 一 个 变量 的 值 赋 给 另 一 个 变量 ,但 

















号 。 使 用 这 种 赋值 时 ， 并 不 会 为 等 号 左边 的 变 























量 复制 一 个 新 值 ， 而 是 将 等 号 左边 
































为 这 两 个 变量 是 同一 个 存储 空间 的 镜像 ， 企 


9 变量 指向 











例如 下 面 这 段 代码 : 


<!doctype html> 











E 何 


等 号 右边 变量 指向 的 内 存 空 间 ， 可 以 简单 的 认 
一 个 变量 值 的 改变 都 会 影响 另 一 个 变量 的 值 。 
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阔 


<html> 

<head> 

<meta charset="utf-8"> 
<title>16.8</title> 
</head> 

<body> 

<?php 

$numA=25; 

$numB=&$numA; 

$numB=33; 

echo "变量 numA 的 值 为 " .$numA."<br>"; 
echo "变量 numB 的 值 为 ". $numB; 
区 之 

</body> 

</html> 
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变量 numA 的 值 为 33 


变量 numB 的 值 为 33 




















3. 变量 的 作用 域 


在 这 段 代 码 中 ， 因 为 使 用 了 引用 赋值 ， 所 以 当 改 变 变量 numB 的 值 时 ， 变 量 numA 的 值 也 
发 生变 化 。 运 行 这 段 代 码 后 ， 效 果 如 图 16.8 所 示 。 









































虽然 PHP 可 以 在 任何 位 置 声明 变量 ， 但 是 变量 声明 的 位 置 以 及 方式 会 决定 变量 的 作 




















域 。 所 谓 变 量 的 作用 域 ， 就 是 指 变量 在 哪些 范围 内 才能 被 使 用 。PHP 中 变量 按照 作 
























































可 以 分 为 局 部 变量 和 全 局 变量 。 









































(1) 局 部 变量 : 局 部 变量 是 指 在 函数 体内 部 声明 的 变量 ， 它 的 作 


























。 例 如 下 面 这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>16.9</title> 
</head> 

<body> 

<?php 

function printName (){ 
$name=" 张 三 "; 

echo "函数 内 的 名 字 叫 " .$name ."<br>"; 
PrintName () 7 


Sname=" 李 四 "7 














域 的 不 





体 
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echo "函数 外 的 名 字 叫 " -Sname: 
?> 

</body> 

</html> 


在 这 段 代 码 中 ， 函 数 printName 内 部 和 外 部 都 声明 了 一 个 变量 name， 但 是 调用 printName 
函数 时 输出 的 是 值 为 张 三 的 内 部 变量 ， 最 后 一 句 输出 的 是 值 为 李 四 的 变量 name， 效 果 如 图 
16.9 所 示 。 
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内 的 名 字 叫 张 三 


函数 
函数 外 的 名 字 叫 李 四 








图 16.9 


























(2) 全 局 变量 : PHP 中 声明 全 局 变量 只 需要 在 变量 前 面 加 上 “8global” 关 键 字 即 可 ， 全 
局 变量 可 以 在 程序 的 任何 地 方 访问 。 如 果 在 函数 内 部 声明 全 局 变量 ， 可 以 在 函数 外 部 引用 这 
个 全 局 变量 ， 如 果 在 函数 外 部 声明 全 局 变量 ， 可 以 在 函数 内 部 引用 这 个 全 局 变量 。 例 如 下 
这 段 代码 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>16.10</title> 
</head> 

<body> 

<?php 

global $name;; 
function printName (){ 
$name=" 张 三 "; 

echo "他 的 名 字 叫 ". $name."。<br>"; 
printName (); 

function printage(){ 
global $age; 

$age=25; 

} 

printAage(); 

echo "他 今年 ".$age." 岁 了 。"; 
全 六 

</body> 

</html> 


在 这 段 代 码 中 ， 先 声明 了 一 个 全 局 变量 name， 然 后 在 printName 函 数 中 为 变量 name 赋 
并 输出 ， 又 在 printAge 函 数 中 声明 了 一 个 全 局 变量 并 赋值 ， 然 后 在 函数 外 面 引用 了 这 个 变 
量 。 运 行 这 段 代 码 后 ， 效 果 如 图 16.10 所 示 。 
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溢 应 用 门 dreamweavercc2- 


他 的 名 他 = = 
他 今年 25 岁 了 


16/16.10.php 


OO HTML 














图 16.10 





(3) 静态 变量 : 函数 在 执行 过 程 中 会 声 





明 很 多 变量 ， 在 函数 执行 完成 后 ， 这 些 变 量 衣 


会 消失 。 如 果 希 望 某 些 函 数 的 值 一 直 保 存 ， 即 使 在 下 次 调用 该 函数 时 ， 仍 然 保持 计算 后 的 变 


量 值 ， 此 时 就 需要 用 到 静态 变量 。PHP 中 j 





















































字 。 例 如 下 面 这 段 代码 : 


山 





Do 


法 就 是 在 该 变量 的 前 面 加 一 个 变量 符号 “$”。 











<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>16.11</title> 
</head> 
<body> 
<?php 
function add()t{ 
static $num=0; 
$numt+; 
echo $num."<br>"; 
} 
add (); 
add () 7 
add () 7 
I 
</body> 
</html> 


明 静 态 变量 











的 方法 就 是 在 变量 前 面 添加 static 关 键 




















在 这 段 代 码 中 ， 声 明了 一 个 静态 变量 num， 在 函数 add 中 变量 num 会 自动 加 1， 然 后 输 






























































将 这 个 函数 调用 3 次 ， 因 为 使 用 了 静态 变量 ， 所 以 每 次 调用 add 函 数 时 ， 变 量 num 的 值 总 
保持 最 后 一 次 计算 的 结果 。 运 行 这 段 代 码 后 ， 效 果 如 图 16.11 所 示 。 
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1 
有 
3 








图 16.11 











(4) 可 变 变量 : 可 变 变量 是 一 种 独特 


























<!doctype html> 
<html> 


的 变量 ， 它 可 以 动态 地 改变 ”个 区 量 的 名 称 ， 方 





例如 下 


看 
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<head> 
<meta charset="utf-8"> 
<title>16.12</title> 
</head> 
<body> 
<?php 
$str= "hello"; 
$$str = "world"; 
echo $str."<br>"; 
echo $$str."<br>"; 
echo $hello."<br>"; 
echo "$str {$$str}"."<br>"; 
echo "$str $hello™; 
?> 
</body> 
</html> 


在 这 段 代码 中 ， 第 1 行 是 一 个 普通 变量 ， 第 2 行 是 一 个 可 
hello 的 变量 ， 即 $hello=“world”。 下 面 5 个 输出 ， 第 1 个 是 了 





























变 变量 ， 


E 常 输出 


相当 于 声明 了 一 个 名 为 


恋 旺 


之 星 ， 


第 2 





个 是 正常 输出 


可 变 变 量 ， 第 3 个 是 输出 与 可 变 变量 等 价 的 变量 ， 第 4 个 是 输出 普通 变量 与 可 变 变 量 ， 最 后 


























个 是 输出 普通 变量 和 等 价 于 可 变 变 量 的 变量 。 运 行 这 段 代码 后 ， 效 果 如 图 





hello world 
hello world 











图 16.12 











(5) 预定 义 变量 : 预定 义 变量 又 称 为 超级 全 局 变量 数组 ， 是 PHP 系 统 中 











16.12 所 示 。 












































动 将 一 些 数 据 放 在 超级 全 局 变量 数组 中 。PHP 中 预定 义 变量 如 表 16.2 所 示 。 









































需要 开发 者 重新 定义 ， 它 可 以 让 你 的 程序 设计 更 加 方便 快捷 。 在 PHP 脚 本 运行 时 ，PHP 会 














带 的 变量 ， 不 




















表 16.2 
变量 作用 
$GLOBALSU] 存储 当前 脚本 中 的 所 有 全 局 变量 ， 其 KEY 为 变量 名 ，VALUE 为 变量 值 
$_SERVERI[] 当前 WEB 服 务 器 变量 数组 
$_GET[] 存储 以 GET 方 法 提交 表单 中 的 数据 
$_POST[] 存储 以 POST 方法 提交 表单 中 的 数据 
$_COOKIE[] 取得 或 设置 用 户 浏览 嚣 Cookies 中 存储 的 变量 数组 
$_FILES[] 存储 上 传 文件 提交 到 当前 脚本 的 数据 
$_ENVI] 存储 当前 WEB 环 境 变 量 
$_REQUESTI] 存储 提交 表单 中 所 有 请 求 数据 ， 其 中 包括 $_GET、$_POST、$_COOKIE 和 $_ 
SESSION 中 的 所 有 内 容 
$ SESSIONU] 存储 当前 脚本 的 会 话 变量 数组 
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型 。 


boolean) 和 字符 串 





4. 变量 的 数据 类 型 


数据 类 型 是 具有 相同 特性 的 一 组 数据 的 统称 。PHP 早 就 提供 了 丰富 的 数据 类 型 ，PHP 
5 中 又 有 更 多 补充 。 数 据 类 型 可 以 分 为 3 类 : 标量 数据 类 型 、 


标量 类 型 包 





舌 整 型 (int 和 integer) 、 


资源 (resource) 和 空 值 (NULL ) 。 


会 根据 引用 变量 的 具体 应 
则 将 选取 占 
则 将 该 字符 串 转换 为 数字 然后 
头 ， 则 只 取 数 字 部 分 而 去 除数 字 后 面部 分 ， 根 据 数字 
以 字 琴 





字 开 
浮 点 型 数据 ， 


5. 变量 类 型 的 转换 





PHP 中 的 类 型 转换 包括 两 利 
动 类 型 转换 : 














(1 








方式 ， 即 














类 型 转换 是 指 在 定义 变 














动 让 
环境 将 3 









































字 节 最 长 的 








浮 点 型 (float、double 和 real) 、 
(string) ， 复 合 类 型 包括 数组 (array) 和 对 象 (object) ， 


变量 转换 为 合适 的 数据 类 型 。 
种 运算 数 的 数据 类 型 作为 





复合 数据 类 型 和 特殊 数据 类 


布尔 型 (bool、 
特殊 类 型 包括 


动 类 型 转换 和 强制 类 型 转换 。 


量 时 不 需要 于 
如 果 所 有 运算 数 都 是 数字 ， 
基准 数据 类 型 ; 


间 定 变量 的 数据 类 型 ，PHP 


如 果 运 算数 为 字符 串 ， 


























进行 求 值 运算 。 

































































如 果 字 符 


开头 ， 则 直接 将 字符 




















后 的 效果 如 图 16.13 所 示 。 


类 型 。PHP 强 制 类 型 转 








<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>16.13</title> 
</head> 

<body> 

<?php 

$numA=1+1.25; 
$numB=2+"2.25"; 
$numC=3+"abc™; 

echo $numA."<br>"; 
echo $numB."<br>"; 
echo $numC."<br>"; 
?> 

</body> 

</html> 


洪灾 用 


2.25 
4.25 
3 


了 dreamweaver cc 2... DO HTML 


字符 串 转 换 为 数字 的 规定 为 如 果 字 符 串 以 数 
部 分 构成 决定 转换 为 整 型 数据 还 是 
转换 为 0。 例 如 下 面 这 段 代码 ， 





oe 


运行 























(2) 强制 类 型 转换 ， 强 制 类 型 转换 允 放 





图 16.13 











fF 我 们 手动 将 变量 














主 





个 小 括号 ， 并 把 








标 数据 类 型 填写 在 括号 











如 图 





16.14 所 示 。 








的 数 





昌 类 型 转换 为 指定 的 数据 














换 与 C 语言 或 者 Java 语言 中 的 类 型 转换 相似 ， 都 是 通过 在 变量 前 面 加 


























来 实现 的 。 例 如 下 面 的 代码 ， 运 行 








后 的 效果 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>16.14</title> 

</head> 

<body> 

<?php 

$numA="5"; 

$numB= (int) $numA; 

$numC= (boo1) $numAa; 

SnumD= (float) $numA; 

SnumE= (double) SnumR7 

$numF= (real) $numAa; 

$numG= (string) $numA; 

SnumH= (array) $numA; 

echo "原始 数据 : " .$numA."<br>"; 
echo "转换 为 整 型 : ". $numB."<br>"; 
echo "转换 为 布尔 型 : ". $numc."<br>"; 
echo "转换 为 浮 点 型 : " .$numD."<br>"; 
echo "转换 为 双 精 度 : ". $numE ."<br>"; 
echo "转换 为 real 型 : " .$numF."<br>"; 
echo "转换 为 字符 串 : ". $numG."<br>"; 
echo "转换 为 数组 : ". $numH."<br>"; 
2 

</body> 

</html> 


© localhost/16/16.14.php 
dreamweaver cc 2.. 9 HTML 











图 16.14 





6. 变量 的 常用 函数 
PHP 中 含有 很 多 系统 定义 的 变量 操作 常用 函数 ， 这 些 函数 包括 以 下 几 种 。 


(1) 变量 转换 函数 : 除了 强制 类 型 转换 以 外 ， 还 可 以 通过 变量 转换 函数 对 变量 进行 转 
换 。 例 如 ， 使 用 settype 函 数 将 变量 转换 为 指定 的 类 型 ， 示 例 代码 如 下 所 示 : 












































<?php 
Sa = "I TSm" 
$b = true; 


settype ($a, "float") ."<br>"; 
settype ($b, "string") ."<br>"; 
echo $a."<br>"; 

echo $b; 
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人 

变量 a 输 出 结果 为 1.75， 变 量 b 输 出 结果 为 1。 另 外 ，intval 函 数 用 于 将 变量 转换 为 整数 ， 
floatval 函 数 用 于 将 变量 转换 为 浮 点 数 ，strval 函 数 用 于 将 变量 转换 为 字符 串 。 这 3 个 函数 的 
法 如 下 所 示 : 




















































































































<?php 
$a “175m"? 
$b 2015; 


floatva ($a); 
strval ($a); 
echo $a."<br>"; 
echo $b."<br>"; 
echo $c."<br>"; 
echo $d."<br>"; 
echo $e."<br>"; 


$c = intval ($a); 









































(2) 变量 检查 函数 :这 类 函数 用 于 对 变量 进行 检查 。 例 如 ， 使 用 isset 函 数 检查 某 个 变 
量 是 否 存 在 ， 如 果 存 在 则 返回 true， 否 则 返回 false， 使 用 empty 函 数 检查 某 个 变量 的 值 是 否 
空 ， 如 果 为 空 则 返回 tmue， 否 则 返回 false。 相 关 示 例 代 码 如 下 所 示 : 










































































<?php 
$a = "1.75m"; 
Sb = mn; 


echo isset ($a)."<br>"; 
echo isset ($b)."<br>"; 
echo isset ($c)."<br>"; 
echo empty($a)."<br>"; 
echo empty ($b)."<br>"; 














人 
(3) 变量 判断 函数 : PHP 中 有 一 些 函数 可 以 判断 变量 的 类 型 ， 这 些 函 数 如 表 16.3 所 示 。 
表 16.3 
函数 名 作用 
is_int()、is_integer( 检测 变量 是 否 为 整数 
is float()、is_double() 检测 变量 是 否 为 浮 点 数 
is_boolO) 检测 变量 是 否 为 布尔 
is_string() 检测 变量 是 否 为 字符 串 
1s_array() 检测 变量 是 否 为 数组 


检测 变量 是 否 为 一 个 对 象 
检测 变量 是 否 为 资源 类 型 
检测 变量 是 否 为 NULL 


1s_object() 
is_resource() 
is_nullO 
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后 将 不 会 改变 。PHP 中 有 两 个 常量 ， 分 别 为 









































常量 是 一 种 特殊 的 变量 ， 它 的 变量 值 声明 之 
自 定义 常量 和 预定 义 常量 。 
1. 自 定义 常量 
PHP 中 使 用 define 函 数 定义 常量 。 常 量 命名 方法 与 变量 命名 相同 ， 以 字 长 

















或 下 划 线 开头 。 














常量 名 称 区 分 大 小 写 ， 但 按照 惯例 常量 名 称 





全 部 大 写 。 如 果 设置 为 true 则 不 区 分 大 小 写 ， 











如 果 设 置 为 false 则 区 分 大 小 写 ， 如 果 没 有 设置 该 参数 ， 则 取 默 认 值 false。 一 个 常量 一 旦 被 定 











义 ， 就 不 能 再 改变 或 者 取消 定义 。 例 如 下 而 

















这 段 代码 : 





<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>16.15</title> 
</head> 

<body> 

<?php 

define ("SYSTEM_NAME", " 险 哈 ") ; 
echo SYSTEM NAME."<br>"; 
define ("SYSTEM NAME", " 啦 啦 "); 
echo SYSTEM NAME."<br>"; 
echo System Name; 

2 

</body> 

</html> 














同名 ， 因 














© Dlocalhost/16/ 
dreamweaver cc 2... HTML 


System_Name 














2. 预定 义 常量 


PHP 也 提供 了 一 些 默认 的 预定 义 常 量 供 使 用 。 在 程序 中 可 以 随时 应 


在 这 段 代 码 中 ， 第 1 次 定义 的 常量 正确 输出 ; 
此 并 不 更 改 它 的 值 ， 依 然 输出 第 一 次 赋 的 值 ， 最 后 一 个 输出 的 常量 
写 ， 被 认为 是 一 个 没有 定义 的 常量 。 运 行 这 段 代码 








第 2 次 定义 的 常量 应 与 第 一 次 定义 的 常量 
没有 区 分 大 小 




















图 


后 ， 效 果 如 





16.15 所 示 。 





16.15.php 





16.15 




















这 些 预定 义 常量 ， 


























但 是 我 们 不 能 任意 曙 


























下 改 这 些 常量 的 值 。PHPH 
所 示 。 


常用 的 一 些 默认 预 定义 常量 及 其 作用 如 表 16.4 
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表 16.4 











FILE 





存储 当前 脚本 的 绝对 路 径 及 文件 名 称 


LINE 存储 该 常量 所 在 的 行 号 
FUNCTION 存储 该 常量 所 在 的 函数 名 称 
CLASS 存储 该 常量 所 在 的 类 的 名 称 
METHOD 存储 该 常量 所 在 的 类 的 方法 名 称 
PHP_ VERSION 存储 当前 PHP 的 版 本 号 


PHP_OS 存储 当前 服务 器 的 操作 系统 





16.2.6 运算 符 


一 个 复杂 的 PHP 程 序 往往 是 由 大 量 的 表达 式 所 构成 的 ， 而 运算 符 则 是 表达 式 的 核心 ， 也 
称 作 操作 符 。 只 有 掌握 了 PHP 表 达 式 和 运算 符 的 用 法 ， 才 能 够 更 好 地 使 用 PHP 语 言 进行 开发 
设计 。PHP 中 常用 的 运算 符 包 括 算术 运算 符 、 赋 值 运算 符 、 比 较 运算 符 、 逮 辑 运算 符 、 位 运 
算 符 、 字 符 串 运 算 符 和 数组 运算 符 ， 下 面 将 分 别 介绍 。 


1. 算术 运算 符 


算术 运算 符 主要 用 于 处 理 加 减 乘除 和 取 模 运算 。 相 关 代 码 如 下 所 示 ， 运 行 结果 如 图 16.16 
所 示 。 


<!doctype html> 
<html> 

<head> 

<meta charset="utf£=8"> 
<title>16.16</title> 












































































































































$a = 22; 
Sb = 6; 
echo "加 运算 结果 是 ". ($a+$b) ."<br>"; 
echo " 减 运算 结果 是 ". ($a-$b) ."<br>"; 
echo " 乘 运算 结果 是 " .$a*$b."<br>"; 
echo " 除 运算 结果 是 " .$a/$b."<br>"; 
echo " 取 模 运算 结果 是 " .$as$b; 

2 

</body> 

</html> 





国 1616 
€ 3 CID loclhost/16/16.16.php 所 
瑟 应 用 0] dreamweaver cc2.. 站 HTML 


加 运算 结果 是 23 
城 运 昔 结果 是 15 
乘 运 咎 结果 是 13: 
除 运算 结果 是 3. 


算 66666566567 
最 模 运算 结果 是 4 








图 16.16 
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2. 递增 /递减 运算 符 

递增 /递减 运算 符 是 可 以 对 操作 系统 〈 可 以 是 数字 或 字符 ) 进行 递增 、 递 减 操作 的 一 种 
运算 符 。PHP 中 有 4 种 这 样 的 操作 符 ， 第 1 种 如 $i++， 表 示 返 回 $i， 然 后 将 $i 的 值 加 1; 第 2 种 如 
++$i， 表 示 $i 的 值 加 1， 然 后 返回 $i;， 第 3 种 如 $i--， 表 示 返 回 $i， 然 后 将 $i 的 值 减 1， 第 4 种 如 -- 
$i， 表 示 $i 的 值 减 1， 然 后 返回 $i。 

3. 赋值 运算 符 

最 常用 的 赋值 运算 符 就 是 等 号 ， 它 的 实际 意义 是 将 等 号 右边 的 值 赋 给 等 号 左边 的 变量 。 







































































PHP 中 还 提供 了 更 多 的 赋值 运算 符 ， 例 如 表 16.5 所 示 。 


表 16.5 









$i=5 $i=5 

$it+=5 $i=$i+5 
一 $i-=5 $i=$1-5 
= as] $i=$i*5 
大 $i/=5 $i=$1/5 
%= $1%=5 $i=$1%5 


$i.= "abe" $i=$1. "abc" 











4. 比较 运算 符 
比较 运算 符 也 称 条 件 运算 符 或 关系 运算 符 ， 比较 两 个 数据 的 值 并 返回 一 个 布尔 类 型 
























































的 结果 。PHP 提供 的 比较 运算 符 及 其 用 法 如 表 16.6 所 示 。 




























































































表 16.6 
比较 运算 符 名 称 说 明 
se $a=——$b 如 果 变 量 a 等 于 变量 b， 则 返回 true 
= $a=——$b 如 果 变 量 a 等 于 变量 b， 并 且 他 们 的 数据 类 
型 也 相同 ， 则 返回 true 
!= 或 二 $al!=$b 或 $a 一 $b 如 果 变 量 a 不 等 于 变量 b， 则 返回 true 
!= E $a!l==$b 如 果 变 量 a 不 等 于 变量 b， 则 返回 true 
< Sa<$b 如 果 变 量 a 小 于 变量 b， 则 返回 true 
> $a>$b 如 果 变 量 a 大 于 变量 b， 则 返回 true 
<= 于 $a<=$b 如 果 变 量 a 小 于 或 等 于 变量 b， 则 返回 true 
>= 于 $a>=$b 如 果 变 量 a 大 于 或 等 于 变量 b， 则 返回 true 


























5. 逻辑 运算 符 
逻辑 运算 符 用 于 处 理 逻 辑 运算 操作 ， 只 能 操作 布尔 型 值 。PHP 提 供 的 逻辑 运算 符 及 其 
法 如 表 16.7 所 示 。 
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表 16.7 












名 称 
and 或 && $a and $b 或 $a && $b 如 果 $a 和 $b 两 个 都 为 true 时 返回 true 

or 或 | $a or $b 或 $a || $b 如 果 $a 和 $b 任何 一 个 为 true 时 返回 true 
XOT S$a xor $b 如 果 $a 和 $b 只 有 一 个 为 true 时 返回 true 
! !$a 如 果 $a 为 false 时 返回 true 


6. 位 运算 符 

位 运算 符 主要 应 用 于 整 型 数据 的 运算 过 程 。 当 表达 式 包 含 位 运算 符 时 ， 运 算 时 会 先 将 各 
个 整 型 运算 数 转 换 为 相应 的 二 进 制 格式 ， 然 后 再 进行 位 运算 。PHP 提 供 的 位 运算 符 及 其 用 法 
如 表 16.8 所 示 。 























































































































表 16.8 













与 操作 符 Sa& $b 将 在 $a 和 $b 中 都 为 1 的 位 设 为 1 
或 操作 符 $a| Sb 将 在 $a 或 者 $b 中 为 1 的 位 设 为 1 
A 异 或 操作 符 $a^ Sb 将 在 $a 和 $b 中 不 同 的 位 设 为 1 
非 操 作 符 ~$a 将 $a 中 为 0 的 位 设 为 1, 为 1 的 位 设 为 0 
<< 左 移 操 作 符 $a<<2 将 $a 中 的 位 向 左 移动 2 次 ， 空 出 的 位 置 置 为 
0， 每 一 次 移动 都 表示 梯 以 2 
>> 右 移 操作 符 $a>>$2 将 $a 中 的 位 向 右 移 动 2 次 ， 多 出 的 位 置 截 
掉 ， 每 一 次 移动 都 表示 乘 以 2 


























7. 字符 串 运算 符 


字符 串 运 算 符 也 称 连 接 运算 符 ， 用 于 处 理 字 符 串 的 相关 操作 。 在 PHP 中 提供 了 两 个 字符 
串 运 算 符 。 第 1 个 是 连接 运算 符 〈.) ， 它 返回 左右 参数 连接 后 的 字符 串 。 第 2 个 是 连接 赋值 运 
算 符 (.=) ， 它 将 右边 的 参数 附加 到 左边 的 参数 后 。 例 如 下 面 这 段 代 码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>16.17</title> 
</head> 

<body> 

<?php 

$a=" 我 叫 "; 
$b=$a." 张 三 "; 

echo $b."<br>"; 
$p.="， 不 叫 李 四 。"; 
echo $b; 

2> 

</body> 

</html> 
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变量 a 赋值 一 个 字符 串 ， 再 将 变量 a 和 另 一 个 字符 趾 连 接 后 赋值 给 变 






































量 b， 

















通过 .= 运算 符 将 变量 b 与 第 3 个 字符 串 连 接 ， 最 后 输出 的 效果 如 图 

















然后 输出 字符 串 b， 


16.17 所 示 。 










8. 数组 运算 符 

















回 15317 x 
L © Dlocalhost/16/16.17.php 
洪 应 用 dreamweaver cc 2 癌 HTML 


我 叫 张 三 
我 叫 张 三 ， 不 叫 李 四 。 











图 16.17 




















数组 运算 符 应 用 于 数组 的 一 些 相关 操作 。PHP 提供 的 数组 运算 符 及 其 用 法 如 表 16.9 所 示 。 









































表 16.9 





$a+$b $a 与 $b 保存 的 数组 联合 
$a=—$b 如 果 $a 与 $b 保存 的 数组 具有 相同 键 值 ， 则 返回 true 





















































$a=—$b 如 果 $a 与 $b 保存 的 数组 具有 相同 的 键 值 ， 且 顺序 和 数据 类 
一 致 则 返回 true 
$a!=$b 或 8a<>$b | 如 果 $a 与 $b 保存 的 数据 不 具有 相同 的 键 值 ， 则 返回 true 
$a!==$b 如 果 $a 与 Sb 保存 的 数组 不 具有 相同 键 值 ， 且 顺序 和 数据 类 
型 也 不 一 致 ， 则 返回 true 
































错误 而 我 们 又 不 想 将 错误 信息 显示 在 页 面 上 时 ， 可 使 用 错误 抑制 运算 
































表达 式 的 前 面 被 加 上 “@” 这 个 运算 符 以 后 ， 该 表达 式 可 能 产生 的 任何 错误 信息 都 会 


错误 抑制 运算 符 
当 PHP 表 达 式 产生 

符 ; 

被 忽 








略 。 例 如 运行 下 面 这 段 代 码 将 会 得 到 如 图 16.18 所 示 的 错误 。 


<!ldoctype html> 
<html> 
<head> 


<meta charset="utf=8"> 
<title>16.18</title> 


</head> 
<body> 
<?php 
$numA=15; 
$numB=0; 


echo $numA/$numB; 


Es 
</body> 
</html> 
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回 !618 


i 


B localhost/16/16.18.php 


注 直 二 口 dreamweaver cc 2 全 HTML 


Warning: Diyision by zero in 





C:\xrampp\htdocs\16\16. 18- php on line 11 








图 

















如 果 在 运算 符 前 画 
这 种 处 理 错误 的 方法 在 发 布 程序 的 时 候 会 

echo @($numA/$numB); 

10. 执行 运算 符 

执行 运算 符 使 






































ty 

















添加 @， 例 如 下 面 这 段 代 码 ， 刷 新 页 
到 ， 用 以 避免 页 面 上 出 现 意 想 不 到 


(键盘 数字 1 左边 的 按键 ) 符 


16.18 











面 后 就 不 会 出 现任 何 错误 信息 。 


的 错误 信息 。 























号 。 使 用 了 这 个 运算 符 以 











符 内 的 字符 串 将 会 被 当做 DOS 命 令 行 来 处 理 。 例 如 下 面 这 段 代 码 ; 





<!dqoctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title>16.19</title> 

</head> 

<body> 

<?php 

$path="dir C:\\xampp\\htdocs"; 
echo $path; 
































?> 
</body> 
</html> 
运行 这 段 代码 后 ， 效 果 如 图 16.19 所 示 。 
localhost/15/16.19.phr 
灌 站 二 [dreamweover ce 2 HTML 
dr C:\zampp\htdccs 
图 16.19 
11. 三 元 运算 符 


三 元 运算 符 的 功能 与 让 .…else 流 程 语句 相同 ， 它 在 一 行 中 书写 ， 代 码 精 练 、 执 行 效率 








在 PHP 程 序 中 恰当 地 使 











元 运算 符 能 够 i 





高 。 











上 脚本 更 为 简洁 、 高 效 。 三 元 运算 符 的 语法 





如 下 所 示 : 
表达 式 1? 表 达 式 2 :表达 式 3 


这 句 话 的 意思 是 ， 当 表达 式 1 的 值 为 true 时 ， 
表达 式 3 的 值 。 例 如 下 面 这 段 代码 : 


<!doctype html> 
<html> 




















运算 结果 为 表达 式 2 的 值 ， 否 则 运算 结果 是 





268 





第 16 章 PHP 动 态 网 站 开发 





<head> 

<meta charset="utf-=8"> 
<title>16.20</title> 

</head> 

<body> 

<?php 

$fristName="Sean"; 
$lastName=$fristName=="Sean"?"Zhao":"Li"; 
echo $fristName." ".$lastName; 
这 之 

</body> 

</html> 


在 这 段 代 码 中 ， 首 先 给 变量 fristName 赋 值 为 “Sean”， 然 后 判断 变量 fristName 的 值 是 否 
等 于 “Sean”， 返 回 结果 为 tue， 所 以 给 变量 lastName 赋 值 “Zhao”， 最 后 输出 两 个 变量 ， 
行 效果 如 图 16.20 所 示 。 











加 i 事 
































Er pm 
全 © Bb localhost/16/1620php 


EN dreomweover ccz CO HTML 


Sean Zheo 














图 16.20 





12. 运算 符 的 优先 级 
一 个 复杂 的 表达 式 往 往 包含 了 多 种 运算 符 ， 各 个 运算 符 优先 级 的 不 同 决定 了 其 被 执行 的 顺 
序 也 不 一 样 。 高 优先 级 的 运算 符 所 在 的 子 表 达 式 会 先 被 执行 ， 而 低 优先 级 的 运算 符 所 在 的 子 表 
达 式 会 后 被 执行 。 下 面 表格 从 高 到 低 列 出 了 PHP 运 算 符 的 优先 级 。 同 一 行 中 的 运算 符 具有 相同 









































的 优先 级 ， 它 们 结合 的 方向 决定 求 值 顺序 。 左 联 表示 表达 式 从 左 向 右 求 值 ， 右 联 相 反 。 



































表 16.10 
左 [ arrar() 
无 方向 性 + 递增 /递减 运算 符 
无 方向 性 !~-(int)(float)(string)(array)(object)@ 类 型 
左 */% 算术 运算 符 
左 二 算术 运算 符 和 字符 串 运算 符 
左 <<>> 位 运算 符 
无 方向 性 < <=> > 一 比较 运算 符 
无 方向 性 Ss 比较 运算 符 
左 & 位 运算 符 和 引用 
左 位 运算 符 
左 | 位 运算 符 
左 && 逻辑 运算 符 
左 ll 逻辑 运算 符 
左 7: 三 元 运算 符 
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赋值 运算 符 
逻辑 运算 符 
逻辑 运算 符 
逻辑 运算 符 


括号 来 限制 运算 符 的 优先 级 ， 让 优先 级 低 的 表达 

















在 创建 复杂 的 表达 式 时 ， 还 可 以 使 
式 先 进行 运算 ， 再 进行 其 他 处 理 。 











En 
































16.3 流程 控制 语句 











任何 一 种 编程 语言 ， 要 实现 复杂 的 功能 ， 都 必须 使 用 流程 控制 语句 将 多 条 语句 组 成 一 个 
程序 ，PHP 语 言 也 不 例外 。 下 面 我 们 就 介绍 一 下 PHP 语 言 中 的 分 支 语句 和 循环 语句 ， 以 及 特 
殊 的 流程 控制 语句 。 


16.3.1 分 支 语句 


分 支 语 句 是 一 种 非常 常见 的 流程 控制 语句 ， 它 表示 非 此 即 彼 的 流程 选择 ， 这 类 流程 控制 
语句 可 以 分 为 以 下 几 种 。 


1. if 语 句 
这 语句 是 一 种 单条 件 的 判断 语句 ， 它 的 语法 规则 如 下 : 
if (expr) statement 


它 表示 如 果 expr 表 达 式 的 条 件 成 立 ， 那 么 执行 statement 这 条 语句 。 如 果 有 多 个 statement 语 
句 ， 可 以 用 大 括号 括 起 来 ， 例 如 下 面 这 段 代 码 : 


<!ldoctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>16.21</title> 
</head> 

<body> 

<?php 

$a=5; 

$b=10; 

if ($b>$a){ 

echo "a=".$a."<br>"; 
echo "b=".$b."<br>"s 
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echo "b 大 于 a。"; 





芝 光 

</body> 

</html> 

运行 这 段 代码 后 ， 效 果 如 图 16.21 所 示 。 











© [localhost/16/16.21.php 
] dreamweaver cc 2... HTML 








图 16.21 











另外 ，statement 语 句 中 还 可 以 再 柑 套 站 语句 。 
2. else 语 句 


else 语 句 必须 与 让 语句 配合 使 用 ， 表 示 如 果 expr 表 达 式 返回 false 时 ， 应 该 执行 的 语句 。 例 
如 下 面 这 段 代码 : 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>16.22</title> 
</head> 

<body> 

<?php 

$a=5; 

$b=10; 

if ($b>$a) { 

echon pA a 
}elsef{ 

Schnorra Dn 

} 













































































2> 

</body> 

</html> 

运行 这 段 代 码 后 ， 页 面 上 将 输出 “b 大 于 a。”。 
3. else if 语 句 








else 让 语句 表示 当 过 语句 返回 false 时 ， 通 过 新 的 条 件 来 控制 流程 。 它 与 else 不 同 ，else 仅 
当 if 反 回 为 false 时 才 可 以 执行 ， 而 else if 将 根据 新 的 条 件 来 控制 后 面 的 流程 。 例 如 下 面 这 段 
代码 : 
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<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>16.23</title> 
</head> 

<body> 

<?php 

$num=23; 

if ($num%$5==1){ 

echo "余数 是 1<br>"; 
}else if ($num%$5==2){ 
echo "余数 是 2<br>"; 
}else if($num%5==3){ 
echo "余数 是 3<br>"; 
}elsef{ 

echo "不 会 算 。<br>"; 
. 

2 

</body> 

</html> 


在 这 段 代码 中 ， 








的 表达 式 仍然 不 成 立 ， 继 续 执行 1 
“余数 是 3 ”。 在 最 后 


第 一 个 站 语句 








中 的 表达 式 不 成 立 ， 继 续 执行 下 





个 else if 语 句 





下 一 个 else 让 语句 ， 这 个 语句 的 表达 式 成 立 ， 所 以 











不 成 立时 的 流程 。 





4. switch 语 句 


switch 语 句 可 以 看 做 是 将 多 个 过 语句 组 合成 一 个 新 的 控制 语句 ， 根 据 表达 式 的 
的 执行 语句 。 例 如 下 


























<!doctype html> 
<html> 

<head> 

<metal charset="utf-8"> 
<title>16.24</title> 
</head> 

<body> 

<?php 

$num=2; 

Switch (Snum) { 

Case 0: 

case 1: 


个 else if 语 句 的 后 面 ， 


面 这 段 代码 : 

















print "变量 的 值 等 于 0 或 者 1。"; 


break; 

Case 2: 

print "变量 的 值 等 于 2。"; 
break; 

default: 


print "还 不 能 确定 变量 的 值 。 








般 会 上 





和 跟 








， 这 个 语句 
输出 信息 为 








个 else 语 句 ， 控 制 前 














面 所 有 条 件 都 


值 选 择 不 同 
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break; 
Es 
</body> 
</html> 


在 这 段 代码 中 ，switch 语 句 根 据 变量 num 的 值 选择 要 执行 的 语句 。 如 果 变量 num 的 值 是 0 
或 者 1， 将 执行 输出 “变量 的 值 等 于 0 或 者 1。” 的 语句 ; 如 果 变量 num 的 值 是 >:， 将 执行 输出 
“变量 的 值 等 于 2。” 的 语句 ， 否 则 将 执行 输出 “还 不 能 确定 变量 的 值 。” 的 语句 。 

对 于 switch 语 句 而 言 ， 如 果 满 足 多 个 条 件 时 ， 可 执行 相同 的 语句 ， 那 么 这 些 条 件 可 以 写 
在 一 起 ， 如 本 例 中 的 0 和 1。 每 个 case 语 句 的 后 面 都 需要 一 个 break 语 句 ， 这 是 switch 语 句 的 规 
则 。switch 的 最 后 一 种 情况 ， 需 要 使 用 一 个 default 分 支 ， 用 于 处 理 以 上 表达 式 都 不 成 立 的 情 
况 。 


























































































































16.3.2 循环 语句 


循环 语句 是 重复 执行 一 个 或 多 个 语句 。PHP 语 言 中 循环 语句 主要 有 以 下 3 种 。 
1. while 语 句 
while 语 句 表示 先 判断 表达 式 的 条 件 ， 然 后 再 执行 循环 体 的 语句 。 例 如 下 面 这 段 代码 ; 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>16.25</title> 
</head> 

<body> 

<?php 

$num=0; 

$sum=0; 

while ($num<=10)1{ 
$sum+=$num; 

Snum++7 

} 

print "结果 为 " .$sum; 
?> 

</body> 

</html> 


在 这 段 代 码 中 ， 先 声明 了 变量 num 和 sum， 在 while 表 达 式 中 判断 num 是 否 小 于 等 于 10， 如 
果 表 达 式 成 立 ， 那 么 将 变量 sum 和 num 相 加 的 结果 赋值 给 变量 sum， 然 后 将 num 的 值 加 1， 继 续 
执行 下 一 次 循环 ， 这 样 就 能 计算 出 从 0 递 加 到 10 的 总 和 。 

2. do…while 语 句 

do…while 语 句 与 while 语 句 相 同 ， 但 是 while 语 句 先 判断 表达 式 ， 然 后 再 执行 语句 ， 而 
do…while 语 句 则 是 先 执行 循环 的 语句 ， 再 判断 表达 式 ， 如 果 表 达 式 成 立 ， 那 么 继续 执行 下 一 
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次 循环 ， 否 则 终止 循环 。 例 如 下 


<!dqoctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>16.26</title> 
</head> 

<body> 

<?php 

$num=10; 

dof{ 

print $num."<br>"; 
$num-——; 

}while ($num>5) 

公关 

</body> 

</html> 








在 这 段 代码 中 ， 先 声明 一 个 


可 的 代码 : 














变量 num， 然 后 赋值 为 10， 执 行 循环 语句 ， 输 出 变量 ， 并 将 














变量 递减 ， 最 后 判断 变量 的 值 是 








否 大 于 5， 如 果 大 于 5 则 继续 下 一 次 循环 ， 否 则 终止 循环 。 运 








行 这 段 代 码 后 ， 页 面 效 果 如 图 16.22 所 示 。 




















洪 庙 有 


3. for 语 句 


以 上 两 种 循环 都 是 在 循环 次 











党 





可 以 直接 使 用 for 循 环 语句 。 








© Dlocalhost/16/16.26.php 
dreamweaver cc 2. DS HTML 








图 16.22 











数 不 确 定 的 情况 下 使 用 的 循环 ， 如 果 已 经 确定 需要 循环 多 少 
for 循 环 语句 的 语法 如 下 所 示 : 





for (exprl; expr2; expr 3) statement 
第 一 个 表达 式 exprl 始 终 都 会 无 条 件 的 在 循环 开始 的 时 候 执行 ， 每 一 次 循环 的 时 候 ， 表 达 
式 expr2 都 会 被 执行 ， 如 果 结 果 为 tue， 则 继续 执行 循环 ， 否 则 结束 循环 ， 每 次 循环 结束 后 ， 
会 计算 表达 式 expr3 。 例 如 下 面 这 段 代 码 : 





<!doctype html> 
<html> 

<head> 

<meta charset="utf=8"> 
<title>16.27</title> 
</head> 

<body> 
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<?php 
for($i=0;$i<10;$i++){ 
Print $i"=Wr 

} 








3 

</body> 

</html> 

运行 这 段 代 码 后 ， 效 果 如 图 16.23 所 示 。 











全 © Dlocalhost/16 


洲 应 同门 dreamweaver cc 2 


0-1-2-3-4-5-6-7-8-9- 








16.23 




















在 for 循 环 中 ，3 个 表达 式 都 可 以 为 空 ， 但 是 不 建议 将 第 2 个 表达 式 省 略 ， 因 为 那样 的 话 将 
无 法 确定 循环 的 次 数 ， 从 而 进入 无 限 循环 中 。 


16.3.3 特殊 流程 控制 


为 了 更 好 的 控制 循环 语句 ， 在 某 些 特殊 情况 下 ， 需 要 使 用 特殊 的 流程 控制 语句 ， 以 满足 
各 种 需求 。 
1. break 
中 断 当 前 执行 ， 可 以 在 任意 的 循环 语句 中 使 用 。 例 如 


<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>16.28</title> 
</head> 

<body> 

<?php 
for($i=0;$i<10;$i++) { 
if($i>5){ 

break; 

. 

Primt SL 

} 

Bx 

</body> 

</html> 


在 这 段 代 码 中 ，for 循 环 用 于 输出 0 到 9， 而 让 语句 控制 当 变量 i 大 于 5 时， 执行 break 语 句 ， 




































































这 段 代码 : 











-也 
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如 








h 断 所 有 操作 。 运 行 这 段 代码 后 ， 效 果 如 图 16.24 所 示 。 


国 1628 
© Dlocalhost/16/16.28.php 
泪 应 用 门 dreamweaver cc 2.， 站 HTML 


0-1-2-3-4-5- 





图 16.24 


2. continue 


continue 语 句 只 能 在 循环 语句 的 内 部 使 用 ， 跳 过 这 次 循环 ， 继 续 执行 下 一 次 循环 。 例 
如 下 面 这 段 代码 : 





















































<!doctype html> 
<html> 

<head> 

<meta charset="utf-8"> 
<title>16.29</title> 
</head> 

<body> 

<?php 

for ($i=0;$i<10;$i++) { 
if ($i%2==0) { 
continue; 

了 

PELmE SL 

站 

人 

</body> 

</html> 


在 这 个 循环 语句 中 ， 如 果 变 量 对 2 求 余 等 于 0， 也 就 是 说 ， 如 果 变 量 是 偶数 ， 将 不 执行 输 
出 语句 ， 所 以 输出 的 都 是 奇数 ， 效 果 如 图 16.25 所 示 。 























回 1529 
€ © [Blocalhost/16/16.29.php 
洲 应 用 门 dreamweaver cc 2.， 癌 HTML 


1-3-5-7-9- 








网 


16.25 

















276 


第 17 章 使 用 MySQL 数 据 库 


数据 库 是 存放 数据 的 仓库 ， 数 据 库 中 的 数据 具有 一 定 的 关联 关系 ， 这 些 数据 可 以 是 文 
本 、 图 像 、 音 频 或 视频 。MySQL 数 据 库 是 一 种 关系 型 数据 库 ， 这 种 数据 库 是 由 一 个 或 多 个 表 
格 组 成 的 ， 每 个 表格 中 存放 的 就 是 数据 。 












































17.1 Windows 下 安装 和 配置 MySQL 
数据 库 


MySQL 数 据 库 是 一 个 免费 的 数据 库 ， 它 可 以 在 多 个 平台 上 安装 和 运行 ， 下 面 我 们 以 
Windows 环 境 为 例 ， 介 绍 MySQL 数 据 库 的 安装 和 配置 方法 。 
































17.1.1 下 载 与 配置 免 安 装 版 本 


户 可 以 到 MySQL 数 据 库 官网 上 下 载 安装 或 免 安 装 的 版 本 ， 这 里 以 免 安 装 的 mysql- 
noinstall-5.1.73-winx64.zip 为 例 进行 讲解 ， 用 户 可 以 到 以 下 网 址 下 载 。 






































http://dev.mysql.com/downloads/mysql/5.1.html#downloads 
下 载 成 功 后 ， 可 以 按照 以 下 操作 步骤 进行 配置 : 

将 mysql-noinstall-5.1.73-winx64.zip 压 缩 包 解压 到 C:\Program Files 文 件 夹 下 。 

贺 打开 解压 后 的 文件 夹 ， 找 到 名 为 “my-small.ini” 的 配置 文件 ， 将 其 重 命名 为 “my. 
ini”， 然 后 用 记事 本 打开 该 文件 ， 在 [client] 和 [mysqld] 下 均 添 加 一 行 : default-character- 
set=gbk。 

园 打开 Windows 环 境 变量 设置 ， 新 建 变量 名 MYSQL_HOME， 变 量 值 为 MySQL 的 安装 
目录 ， 即 C:\Program Files\ mysql-noinstall-5.1.73-winx64。 

在 环境 变量 的 Path 变 量 中 添加 “;%MYSQL HOMENbin:”， 这 里 注意 不 要 遗忘 了 前 后 
的 分 号 。 

加 安装 MySQL 服 务 ， 打 开 Windows 命 令 提 示 符 ， 执 行 以 下 命令 : 


mysqld -instal1l1 MySql -defaults-file="my.inin 











如 果 提 示 “Service successfully installed.” 则 表示 安装 成 功 。 然 后 打开 Windows 命 令 提 示 
符 ， 如 果 要 启动 MySQL， 可 以 输入 net start MySQL; 如 果 要 停止 MySQL， 可 以 输入 net stop 





QQ | 网 站 和 和 


作 、 发 布 与 维护 技术 实战 








MYySQL; 





如 果 要 条 


载 MySQL， 可 以 输入 sc delete MySQL 。 


原生 态 的 MYSQL 数据 库 操作 需要 使 用 Windows 命 令 提 示 符 ， 操 作 非 常 不 方便 ， 为 了 提高 








工作 效率 ， 可 以 使 























其 他 可 视 化 的 操作 界面 来 维护 MySQL 数 据 库 。 








17.1.2 通过 安装 XAMPP 安 装 MySQL 数 据 库 


XAMPP 是 一 个 把 Apache 网 页 服务 器 与 PHP、Perl 以 及 MYSQL 集合 在 一 起 的 一 个 免费 的 
























































































































































































































































安装 包 ， 它 允许 用 户 在 自己 的 电脑 上 轻易 的 建立 网 页 服务 器 。 下 面 我 们 介绍 如 何 安装 和 配置 
MYSQL 数据库。 
户 可 以 到 官网 (http://www.xampps.com/) 下 载 XAMPP 的 安装 包 ， 直 接点 击 安装 ， 安 
装 过 程 会 提示 用 户 选 择 安装 相应 的 服务 ， 此 时 可 以 勾 选 Apache 服 务 和 MySQL 服 务 。 安 装 完 
成 后 ， 点 击 桌面 的 快捷 方式 启动 XAMPP， 启 动 后 看 到 如 图 17.1 所 示 图 形 表示 安 装 成 功 。 如 果 
Apache 服 务 不 能 启动 ， 请 检查 您 是 否 安装 过 IS， 因 为 Apache 的 默认 端口 是 80， 与 IIS 端 口 冲 
突 ， 如 果 冲 突 ， 请 打开 Xxampp/apache/conf/httpd.conf 文 件 ， 把 listen 80 修 改 为 其 他 的 端口 。 
回 。 XAMPP ControlpanelApplication 。 - = 匡 恒 
ee 
[全 Ce 
Se 2 多 Ew 
图 17.1 
在 这 个 界面 中 ， 单 击 MySQL 后 面 的 atmin 按 钮 ， 可 以 打开 phpMyAdmin 操 作 界 面 ， 在 这 个 
操作 界面 中 可 以 对 MySQL 数 据 库 进行 各 种 可 视 化 操作 ， 如 图 17.2 所 示 。 
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在 默认 情况 下 ，PHPMyAdmin 有 两 个 














权限 ， 而 pma 是 普 ii 








phpmyadmin/ 地 址 进入 。 

















数据 库 中 存在 这 样本 
账户 并 























以 不 
j 除 原 有 的 root 账 户 。 在 3 
权限 ”链接 ， 在 弹出 的 对 话 框 中 有 一 个 修改 登录 信息 /复制 





的 界面 。 
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CT 


ri 











在 这 个 对 话 框 中 输入 

















创建 一 个 与 root 相 同 权 限 的 





户 














户 名 和 密码 ， 其 人 





另外 ， 


密码 就 能 登录 的 账 


界面 点 击 “ 权 限 ” 选 项 卡 ， 然 











户 名 ， 分 别 是 pma 和 root。 其 中 ，root 是 管理 员 
户 权 限 ， 但 是 二 者 在 默认 状态 下 均 无 密码 ， 所 以 我 们 点 击 admin 按 
钮 后 就 直接 进入 了 phpMyAdmin 








还 可 以 在 浏览 器 中 直接 输入 http://localhost/ 











户 是 不 安全 的 ， 所 以 需要 创建 新 的 管理 员 








后 单 击 root 账 号 








后 面 的 “编辑 





























户 的 








17.3 























再 次 编辑 root 账 号 ， 么 
钮 后 ， 即 可 删除 root 账 户 。 











选 “ 从 














| 











户 表 中 册 





除 旧 

















图 





区 域 ， 如 图 17.3 所 示 。 








也 参数 保持 不 变 ， 然 后 点 击 “ 执 行 ”按钮 ， 即 可 





户 ”， 其 他 参数 不 变 ， 点 击 “ 执 行 ” 按 





他 :2 _ MySQL 数据 库 基础 


数据 库 可 以 看 做 是 一 个 存储 数据 对 象 的 容器 ， 在 MySQL 中 ， 
表 是 所 有 关系 型 数据 中 


(1) 表 : 





狼 





(2) 视图 : 








视 





是 将 多 个 表 中 


储 数据 ， 只 定义 基本 的 表 结 


构 。 视 


昌 对 象 包括 以 下 几 种 。 














最 重 
线 主 


的 字段 组 














《37 索 3 : 
构 。 这 种 结构 根 
(4) 约束 : 
主 外 键 约束 ， 主 
(5) 存储 过 程 


约 








索引 是 为 了 提高 表 
昌 索 引 表 达 式 的 值 进行 逻辑 排 
束 是 保证 数据 库 中 数据 唯 
键 约束 当前 表 记 录 的 
: 存储 过 程 是 一 组 

















辑 后 存储 在 数据 库 中 ， 





准 一 性 ， 


的 对 象 ， 是 一 种 用 
织 在 一 起 形成 的 
图 可 以 像 表 一 样 进行 查询 、 
的 检索 效率 ， 在 数据 

















表 的 一 列 或 
序 ， 它 可 以 实现 对 数据 的 


于 存储 和 操作 数据 的 结构 。 








本 身 并 不 存 
新 的 操作 。 
建 的 一 种 结 
































多 








能 完成 


村 





存储 过 程 具有 输入 、 输 


性 与 完整 性 





的 一 种 保证 





的 约束 就 是 























键 约束 当前 表 记 录 与 其 





定 功 能 的 SQL 语句 集合 。 
HH 和 输入 /输出 参数 ， 它 可 


他 表 的 关系 。 
这 个 语句 集合 经 过 编 
以 由 程序 、 触 发 器 或 
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从 而 激活 它 ， 实 现代 码 段 中 的 SQL 语 句 


， 触 发 器 是 不 需要 调 











男 一 个 存储 过 程 调 
Ko) 触发 器 : 触发 器 是 一 


个 被 指定 关联 到 一 个 表 的 数据 库 对 象 
是 由 SQL 语句 组 成 的 ， 因 























时 ， 它 会 被 激活 。 触 发 器 的 代码 是 









































的 ， 当 一 个 表 的 特别 事件 出 现 


























触发 器 与 表 的 关系 密切 ， 








动 执行 ， 例 如 ， 通 过 触 























用 在 存储 过 程 中 的 语句 也 可 以 用 在 触发 器 的 定义 中 。 
护 表 中 的 数据 。 当 有 操作 影响 到 触发 器 保护 的 数据 时 ， 触 发 器 
发 器 实现 多 个 表 间 数据 的 一 致 性 。 当 对 表 执 行 INSERT、 

激活 触发 器 。 



























































。 但 存储 函数 不 能 # 


























对 


DELETE 或 UPDATE 操 作 时 ， 将 


(7) 存储 函数 :存储 函数 与 存储 过 程 类 似 ， 也 是 由 SQL 和 过 程式 语句 组 成 的 代码 片段 ， 
有 输出 参数 ， 因 为 存储 函数 本 身 就 是 


























并 且 可 以 从 应 用 程序 和 SQL 中 调 


输出 参数 。 存 储 函 数 必须 包含 一 
(8) 事件 ;事件 与 触发 器 类 似 ， 都 是 在 某 些 事件 发 生 


据 库 上 启动 一 条 语句 时 被 激活 ， 而 事件 是 在 相应 的 时 刻 被 激活 。 









































nn 


贡 














条 RETURE 语句 ， 从 而 返回 一 个 结果 。 
生 时 启动 。 不 同 的 是 触发 器 是 在 数 


人 3 MySQL 表 结 





一 个 








MySQL 是 一 种 关系 型 数据 库 ， 表 是 数据 库 
些 与 表 有 关 的 基础 知识 。 




















非常 重要 的 对 象 ， 下 面 我 们 简单 介绍 一 




















(1) 表 结 构 ， 表 结构 
类 型 指定 了 这 列 是 哪 一 -类 数据 。 



































(3) 字段 每 个 记录 由 若干 个 数据 项 构成 ， 构 成 记 


列 名 和 数据 类 型 组 成 。 每 个 列 名 表示 表 上 





























(4) 空 值 : 空 值 null 通 常 表示 未 知 、 不 可 用 或 在 以 后 添 力 


加 数据 的 时 候 可 以 不 指定 数据 值 ， 
(5) 主键 : 主键 是 用 于 区 别 表 














h 所 有 数据 的 唯一 标识 。 



































个 表 中 可 以 有 一 个 列 是 
































数据 类 型 指定 了 表 中 的 列 应 该 使 

















为 其 指定 数据 类 型 。MySQL 提 供 了 丰 





反之 则 必须 指定 一 个 数据 值 。 
主键 不 能 为 空 ， 且 必须 唯一 。 


的 一 类 数据 ， 而 数据 





(2) 记录 : 表 中 的 每 一 行 称 为 一 个 记录 。 
录 的 每 个 数据 项 称 为 字段 。 


的 数据 。 人 允许 为 空 值 的 列 在 添 





主键 ， 也 可 以 是 多 个 列 共同 组 成 主键 。 


他 :4 MySQL 数 据 类 型 





哪 种 类 型 的 数据 ，MySQL 在 创建 表 的 时 候 ， 要 求 必须 
丰富 的 数据 类 型 ， 如 表 17.1 所 示 。 
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属性 

五 数 型 

精确 数据 值 
浮 点 型 

位 型 

字符 型 
Unicode 字 符 型 
BLOB 类 型 
文本 型 

二 进 制 型 
日 期 时 间 类 型 
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表 17.1 
描述 
BINGINT，INT，SMALLINT，MEDIUMINT，TINYINT 
DECIMAL，NUMBERIC 
FLOAT，REAL，DOUBLE 
BIT 
CHAR，VARCHAR，LONGVARCHAR，LONGTEXT 
NCHAR, NVARCHAR 
TINYBLOB, BLOB, MEDIUMBLOB, LONGBLOB 
TEXT, TINYTEXT 
BINARY, VARBINARY 
DATE, TIME, DATETIME, TIMESTAMP, YEAR 





p> 


位 55 创建 数据 库 和 表 























了 解 了 MySQL 数 据 库 的 相关 知识 后 ， 下 面 我 们 介绍 如 何 使 用 phpMyAdmin 对 数据 库 和 表 


进行 相关 操作 。 

















17.5.1 创建 数据 库 


登录 phpMyYAdmin 界 面 后 ， 点 击 “ 数 据 库 ”标签 页 ， 在 新 建 数据 库 的 第 一 个 文本 框 中 输 
入 数据 库 的 名 称 ， 然 后 在 后 面 的 下 拉 列 表 中 选择 数据 库 对 应 的 字符 集 ， 最 后 点 击 “ 创 建 ” 按 
钮 ， 这 样 就 创建 了 一 个 新 的 数据 库 ， 如 图 17.4 所 示 。 新 创建 的 数据 会 出 现在 左边 的 数据 库 列 
表 中 ， 如 图 17.5 所 示 。 
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图 17.4 
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phpMyAdmin 


会 名 9 器 se 


cdcol 


区 


infornation_schena 


@ 





司 mysql 
司 performance_schema 
9 phpmyadnin 
I test 
习 webauth 
I webdb 
:3 











17.5.2 指定 数据 库 用 户 
在 如 图 17.5 所 示 图 形 中 选中 新 创建 的 数据 库 ， 进 入 数据 库 管 理 界面 ， 如 图 17.6 所 示 。 



































-=-En 
TY 
¢ 3 GDIocihosyphpmyadmivindexphpydb=webdbatoken=1c0c18f71d04f6167cfgbfe623edbez24 安 | 忆 
| Nici wa 
| phpMyAdmin 
E 月 8 EN BE BIA /af mM Tan ta 
| a8eome ET 
| 主 包 Ru 轨 欠 振作 
| Vober rr 。 局 仙人 阳 
攻 据 库 中 兴 身 者。 xoot a 
区 
总 天 加 类 由 户 
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图 17.6 






































点 击 “ 权 限 ”标签 ， 然 后 点 击 “ 添 加 新 用 户 ” 链 接 ， 打 开创 建新 用 户 界面 ， 如 图 17.7 所 
示 。 在 这 个 界面 中 填写 数据 库 新 用 户 的 名 称 ， 选 择 主机 并 设置 密码 ， 点 击 “ 执 行 ”按钮 后 为 
新 建 的 数据 库 创 建 一 个 用 户 。 

































































-cm 
localhon /loeshon |p x 
| ¢ 3 @ [Diocalhosyphpmyadmivindexphprdb=webdbatoken=1c0c18f71d04f6167cfebfe823edbe24 喜 | 三 
| 
| phpMyAdmin 
| 1 司 汪 克 4 太 总 有 二 5 二 SA 三 允 昌 王子 和 光 缉 ， 具 也 届 ， 击 多 
| awone 
添加 新 用 上 
[se 
Bak 一 一 
ED 了 | [eesmen 
Ee 一 一 
二 [ER 
图 17.7 
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17.5.3 创建 数据 表 








选中 新 建 的 数据 库 进 入 数据 库 管 理 界面 ， 然 后 单 击 “ 创 建 数据 表 ” 按 钮 ， 填 写 数 据 表 名 

















称 、 字 段 名 称 、 字 段 类 型 等 信息 ， 如 果 需 要 添加 更 多 的 字段 ， 














可 以 单 击 “ 执 行 ” 按 钮 ， 如 图 
居 表 操作 。 新 添加 的 数据 表 会 ! 

















EC 



























































-=-En 
要 理 大 性 

| | = 

] | 

| | 

中 水 
保存 | 或 入 加 | | 人 字符 信行] 





17.8 所 示 。 添 加 完 所 有 字段 后 ， 单 击 “ 保 存 ”按钮 完成 创建 数 
现在 左 侧 列表 中 ， 单 击 新 建 的 数据 表 ， 可 以 看 到 新 建 数据 表 的 字段 等 信息 ， 如 图 17.9 所 示 。 
localhom /locahost /wx 
¢ 3 @ 0 localhostphpmyadmin/index php?db-webdbertoken=1cOc1877100415167cfdbfeB23e40e24 
phpMyAdmin EE 
会 Ls 
IE 得 2 长 加 /本 1 ae 
雪 库 让 这 有 有 F [1 和 
OM 
Ee VARGHAR 天 
|sex CHAR 1 无 
一 区 天 
#3le a 
Err maoce 
EX 上 
= 
图 17.8 
a locaihon /iccalnost 1™ x 
4 2 © Diocalhostyphpmyadmivindexphpzdb=webdb&token=1cOc18f71d04f6167cfBbfe823e4be24 








司 人 寺 杀 扰 入 己 号: SA FRf Ta 
aoe 

Lm 

男 SELECT 

有 让 

SM UMTo 0 

和 三 空 对 和 外 拓 作 

] 1 int (tl) 吾 王 ek ES 
© me vercbar fe0) ali chimere ct = 二 志 i 
目 3 sx char(l) bl 否 下 本 人 人 srSv 
回 tee inttll) 吾 五 Pd 


七 和 壬 /全 Tf 过 帮 # 疡 掉 闻 6 洲 角 履 生 册 2 户 3E 面 收 - 司 条 引 


站 机 要 【RI [ 居 浇 ][ 避 和 3% 于 PP 信 双 刷新] 





ET 














时 3 jf | 13 信 和 于 GK 日 于 #9 于 之 后 各 ”。| 人 

0 REEXANRal: | 
| 

有 0 个 宁 所 人 全 宁 引 (所 














图 17.9 
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人 .6 添加、 修改、 删除 和 查询 数据 





创建 数据 表 后 ， 我 们 就 可 以 在 数据 表 中 对 数据 进行 相关 操作 ， 包 括 添加 、 修 改 、 删 除 和 
查询 数据 的 操作 。 














17.6.1 添加 数据 

选中 创建 的 数据 表 后 ， 单 击 插入 选项 ， 打 开 如 图 17.10 所 示 的 录入 窗口 ， 填 写 相关 信息 
后 ， 单 击 “ 执 行 ”按钮 ， 即 可 添加 数据 。 
17.6.2 修改 数据 


选中 创建 的 数据 表 ， 可 以 查看 当前 数据 表 中 的 数据 ， 如 图 17.11 所 示 。 单 击 对 应 数据 行 前 
面 的 “编辑 ”按钮 ， 可 以 重新 打开 如 图 17.10 所 示 的 界面 ， 对 选中 的 数据 进行 修改 后 ， 单 击 
“执行 ”按钮 即 可 修改 选中 的 数据 。 
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- -mn 
echo /locahont 
¢ 3 C Vlocalh 
phpMyAdmin 
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ee 天 
ED 
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日 CE 





图 17.10 
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篇 localhest /localhost/w 








€ 3 © | localhost/phpmyadmin/indexphp?db=webdbatoken=1cOc18f71d04f6167cfdbfe823e4be24 





百 芒 贡 和 加配 和 A 基 A 忆 SY 局 SA fF Ef DES 








LIMIT5 30 
CN [5 关头 1 1 训 在 30L [人 刘 FI 代码 1 弄 几 了 
ED | 加 AE | 可 式 9 不， 并 有 在 100。 | 和 后生 各 是 
+ 
seT 也 





目 o7 导语 亿 羡 需 半 3 三 仙人 时 2015001 贡 三 男 20 
日 2 网 7 忆 惠 当 呈 于 关押 加 WF 2015002 革 四 男 
有 者 机 可 沁 拓 和 了 豆 避 个 时 2015003 三 互 大 


1 /sr PE FE DM 5 
BER) | | ,wir* jo | 4 [iF | 桥 式 未 ， 并 及 在 [100 | 得 后 要 后 





phnpMuAadmin EE EE 





风疹 此 SQL 坦 洞 加 为 注 














图 17.11 


17.6.3 删除 数据 





在 如 图 17.11 所 示 的 图 形 中 选中 要 删除 的 数据 ， 单 击 “ 删 除 ”按钮 ， 弹 出 如 图 17.12 所 示 的 








提示 框 ， 单 击 “ 确 定 ”按钮 后 即 可 删除 选中 的 数据 。 








TY 
« ©@ [0 localhost/phpmyadmin/index.php?db-webdbatoken=1cOc18171d0416157cf8bfe823e4be24 


phpMyAdmin Wi 


目 较 关 结 构 情人 和 续 和 A 号 Sb% 辐 SA A Dis 


student 
LIMITO 30 | localhost 上 的 网 页 及 示 : 





本 电 者 ] 【前 笃 20L ] 【创建 PEF 人 到 [8 新 


Sa 
DELETE FROM Webdb etudent WHERE ctudent id 
= 2015003 AND shudent- name = \IE\ AND 。 


] tte" tudert ,ses = VV AND cudent .age = 30 UMIT 1 





+ 先贤 
i | 
司 上 纺 钼 | 尽快 速 计 相关 真性 号 国 
旧地 过 入 六 快 这 请 括 了 EE 二 辽 2015002 全 百 勇 
| 交 的 相 | 过 拓扑 | 

/i SU op 人 日 晤 已 邓 

未; 0 | 5. #0 以 | 水 平 ， 个 式 好 示 ， 并 且 在 |100 行 后 重复 标 症 


可 二 


























一 吉 亩 结果 选项 


居 打 外 局 打点 (全文 由) 天 SS 吉 纯 直 画 去 十 条 加 





| Bi nA | 
生生 DER LO ROD RD WHERE NED NO ND ND S00 AND RD ND 

















图 17.12 
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17.6.4 查询 数据 























phpMyAdmin 界 面 执行 查询 操作 的 方法 非常 简单 ， 单 击 “ 数 据 表 ” 即 








图 








还 可 以 控制 从 多 少 行 




















界面 




















后 ealhosty localhowt /wx 


17.13 所 示 。 用 户 可 以 在 “显示 ”文本 框 中 输入 要 查询 数据 的 数 
始 查询 ， 以 水 平 或 垂直 的 方式 显示 结果 等 。 
通过 鼠标 操作 完成 相关 查询 的 功能 比较 有 限 ， 而 且 操作 不 是 很 方便 ， 要 
也 执行 复杂 查询 操作 ， 还 是 需要 执行 相关 的 SQL 查询 。 


完成 查询 数 
来 控制 返 区 
































杏 - -En 





€ 会 G [Docalhosyphpmyadmivindexphpzdb=webdbattoken=1c0c18F71d04f5167cfabie825e4bez4 





phpMyAdmin 


全 对 9 § 
[ev 

回 sudo 
0 和 押 ) 





与 型 人 飞 拓 表 半 搬入 A 习 S% 喜 SA 信人 F 是 和 


辐 尖 遇 基因 构 


SELECT” 
UMiTo 5 

ma) |5 | +1. i [0 以 [大 "| A HE [1 
+ 二 
上 而 a mx 


目 4 多 缠 芝 亿 加 中 作 对 寓 机 号 呈 从 2015001 亲 三 灵 。 20 
目 当量 扩 克 亿 惠 并 六 对 琶 制 全 妥 民 2015002 字 卓 办 。 25 


七 主人/ 主 T 寺 关 P 声 坟 从 R 生 MR 本 5 出 
B39 | | 1,Lhse ES 站 RE, #B 二 [0 
| 相亲 站 要 过 大 


七 打 绷 览 抽打 多 亲 览 《全文 时 未) 加 与 出 而 有 未 本 二 重新 六 有 





| _ 屁 将 此 sot 地 间 加 为 书签 





| 入 了 庆 所 有 风 户 包 历 问 比 玉生 


图 17.13 


总 乔 要 [由 磺 ] 【前往 【局 SL ] 【 创 卫 FP 区 网] 【出 新 


后生 丰 和 四 


行 所 本 页 本 
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第 18 章 使 用 Dreamweaver 
创建 PHP+MySQL 动态 网 站 





Dreamweaver 是 一 款 非 常 流行 的 
面 效果 ， 还 可 以 配合 PHP 和 MYySQL 介 
Dreamweaver 创 建 PHP+MySQL 的 动态 














于 创建 可 视 化 网 页 的 工具 ， 它 不 仅 可 以 创建 可 视 化 页 
建 动态 网 站 。 本 章 将 通过 具体 案例 ， 详 细 介 绍 如 何 使 
网 站 。 












































18,1 Dreamweaver 与 PHP 的 整合 


















































在 前 面 的 课程 中 ， 我 们 介绍 
需要 创建 很 多 的 页 面 ， 使 
可 以 通过 以 下 步骤 创 











了 如 何在 Dreamweaver 中 编写 PHP 代 码 ， 要 创建 一 个 网 站 ， 就 
Dreamweaver 可 以 对 这 些 页 面 进行 很 好 的 管理 。 在 Dreamweaver 中 























建站 点 并 开发 PHP 程 序 。 


启动 Dreamweaver 软 件 ， 选 择 “ 站 点 ”一 “新 建站 点 ”命令 ， 打 开 “ 站 点 设置 对 象 
LibrarySys ”对话 框 ， 如 图 18.1 所 示 。 在 该 对 话 框 中 的 “站 点 名 称 ” 文 本 框 中 输入 网 站 站 点 的 


名 称 ， 并 指定 本 地 站 点 文件 夹 为 xampp 下 的 程序 发 布 目录 。 





站 点 设置 对 银 LibrarySys ES 
aver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 Dreamweaver 


| Dreamwe: 
站 点 通常 包含 两 个 部 分 : 可 在 其 中 存 件 的 计算 
| 燃 ， 证 本 站 委 到 Web 上 的 EE 夹 。 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 夹 和 名 称 。 
站 点 名 称 : [LbranySys ] 



































本 地 站 点 文件 卖 : [CWampphtdocs VibrarySys\ 国 
EE Ea Ea 
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加 切换 到 左边 列表 中 的 “服务 器 ”选项 ， 然 后 单 击 右边 的 “加 号 ”按钮 ， 在 打开 的 对 
话 框 中 设置 服务 器 名 称 为 “LibrarySys”， 连 接 方式 为 “本 地 /网 络 ”， 服 务 器 文件 夹 选 择 


Xxampp 目 录 下 的 LibrarySys 文 件 来 ，WebURL 设 置 为 http:/localhost/ LibrarySys/， 效 果 如 图 18.2 
所 示 。 

























































































站 点 设置 对 银 LibrarySys |x| 
其 | 一 一 一 一 一 一 一 各- 一 一 一 一 一 得 
上 本 过 7 [aas |] 
连接 方法 : | 本 地 代 络 了 Wb 并 发 
服务 器 文件 夹 : [C: Wampphtdocs VibrarySys jes 
‘Web URL: [http://ocahosth brarySys/ 测 式 | 
ED [| | 
到 弓 太 ][ 到 
图 18.2 
切换 到 左边 列表 中 的 “高 级 设置 ”选项 ， 然 后 选择 “本 地 信息 ”选项 ， 在 右边 的 区 








域 中 设置 “默认 图 像 文件 夹 ”地 址 ， 然 后 选择 链接 相对 于 “站 点 根 目录 ”， 效果 如 图 18.3 
所 示 。 


站 点 设置 对 银 LibrarySys [x] 








默认 图 像 文件 夹 : [CVarnop htdoc LbraySys mages\ 


链接 相对 于 : 口 文档 。。 品 站 点 根 目录 








Web uRL [Raaalas | 


Ey 















































创建 后 的 站 点 效果 如 图 18.4 所 示 。 
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JW 8 和 日 下， 五 MI WM) nO) ee(O ES BOW em 









a ey 
DD 作 





中 [ 


























其 保存 在 创建 站 点 的 根 目录 下 ， 效 果 如 图 18.5 所 示 。 





图 18.4 











在 Dreamweaver 中 创建 一 个 名 为 index.php 的 PHP 文 件 ， 并 在 页 面 中 输出 一 段 文 件 ， 将 
























































DW aln Mal EV EAM MRIM) Mt(O) Os(O As) OW eI) Wa. CB © * 
indexphp 
| [RE] 所 分 | 二 天。 图书 下 二 
国 assge en 
ee 本 
| :isoceerren 
| 3 Ve ES/ 
Tm <body| 

= be 
加 | 19 echo "这 是 图 书 管理 系统 的 首页 面 ，"; 
| 
加 13 </htnl> 
加 
四 
可 
《4yIDCL| 模式 人 ) | 无 “| v BT 党 卉 符 汪 直人) 
hs (9 无 ~ 贸 雪 人 | “OB BS 

[3 | 
图 18.5 
国 按 F12 功 能 键 ， 在 浏览 器 中 浏览 创建 的 页 面 效 果 ， 如 果 看 到 如 图 18.6 所 示 的 页 面 ， 骨 








说 明 使 用 Dreamweaver 成 功 创建 了 一 个 PHP 站 点 。 





289 





QQ、 | 网 站 制作 、 发 布 与 维护 技术 实战 





回 于 sa 
© |D localhost/Librarysys/index php 


这 是 图 书 管理 系统 的 首页 面 

















18:2 创建 会 员 管理 动态 网 站 














为 了 说 明 使 用 Dreamweaver 创 建 PHP+MySQL 动 态 网 站 的 过 程 ， 下 面 以 图 









































网 站 为 例 ， 详 细 介 绍 创 建 这 个 网 站 的 整个 过 程 。 





18.2.1 总 体 规划 



































岗 划 了 以 下 几 个 功能 。 


(1) 借阅 排行 : 根据 当前 系统 记录 的 图 书 借阅 情况 ， 查 询 图 书 的 借阅 
次 数 对 图 书 进行 排序 。 








于 











书 管理 系统 动态 


图 书 管理 系统 是 学 习 各 种 编程 语言 中 一 个 比较 经 典 的 案例 ， 在 本 例 中 ， 我 们 为 这 个 系统 


信息 ， 并 根据 借 




















(2) 借阅 管理 ， 该 功能 主要 实现 对 图 书 借阅 的 管理 操作 ， 包 括 图 书 借 














阅 、 图 书 续 借 和 























图 书 归 还 3 个 子 功能 。 图 书 借阅 功能 主要 实现 新 增 图 书 借阅 信息 ， 图 书 续 借 
借 图 书 功能 ， 图 书 归 还 功能 主要 实现 归还 图 书 功 能 。 

(3) 读者 管理 :所 有 借阅 图 书 的 读者 都 必须 在 系统 中 进行 登记 ， 这 个 
读者 类 型 的 管理 和 读者 信息 的 管理 。 不 同类 型 的 读者 可 借阅 图 书 的 数量 不 同 。 







































































功能 主要 实现 续 





功能 主要 实现 对 














(4) 图 书 管理 :该 功能 主要 实现 系统 中 图 书信 息 的 管理 ， 包 括 新 增 图 
书信 息 功能 。 





























(5) 系统 设置 : 系统 设置 是 该 系统 中 设置 各 项 参数 的 地 方 ， 包 括 设置 





图 书 类 型 、4H 



































社 、 权 限 、 用 户 和 借阅 量 等 。 
(6) 修改 密码 : 该 功能 主 修改 当前 登录 用 户 的 密码 。 
(7) 退出 退出 系统 。 












































书信 息 和 修改 图 














版 
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18.2.2 数据 字典 


数据 字典 是 指 系统 涉及 的 各 表 的 名 称 、 字 段 类 型 和 相关 说 明 信 息 ， 根 据 我 们 的 规划 ， 
书 管理 系统 中 用 到 的 表 信息 如 表 18.1~ 表 18.7 所 示 。 
表 18.1 系统 用 户 表 tb_sysuser 
字段 名 称 字段 类 型 
id int(10) 至 
varchar(30) 
varchar(30) 








刘 






























































表 18.2 读者 类 型 表 tb_readertype 
字段 名 称 字段 类 型 
id int(10) 主键 

varchar(50) 读者 类 型 名 称 

Int(4) 可 借阅 量 









表 18.3 读者 信息 表 tb_reader 





字段 名 称 说 明 

id int(10) 主键 
name varchar(30) 名 称 

SeX varchar(4) 性 别 
barcode varchar(30) 条 形 码 
vocation varchar(50) 职业 
birthday date 出 生日 期 
papertype varchar(10) 证 件 类 型 
papernum varchar(20) 证 件 编号 
tel varchar(20) 电话 
email varchar(100) 电子 邮件 
createdate timestamp 创建 时 间 
opearator varchar(30) 操作 员 
remark mediumtext 备注 
typeid int(10) 读者 类 型 id 





表 18.4 出 版 社 信息 表 tb_publishing 










int(10) 主键 
isbn varchar(20) ISBN 
pubname varchar(30) 出 版 社 名 称 
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表 18.5 图 书 类 型 表 tb_booktype 






















字段 名 称 字段 类 型 说 明 
id int(10) 主键 
varchar(30) 图 书 类 型 名 称 











表 18.6 图 书信 息 表 tb_bookinfo 




















字段 名 称 字段 类 型 说 明 

id int(10) 主键 
barcode varchar(30) 条 形 码 
bookname varchar(70) 书 名 
booktypeid Int(10) 图 书 类 型 编码 
author varchar(30) 作者 

isbn varchar(20) isbn 编 码 
price float(8,2) 价格 
storage int(10) 馆藏 量 
intime Date 收藏 时 间 
operator varchar(30) 操作 员 
del tinyint(1) 是 否 删 除 





表 18.7 tb_borrow 





字段 名 称 字段 类 型 
id int(10) 主键 


readerid int(10) 借阅 人 id 






























bookid int(10) 借阅 图 书 id 
borrowtime timestamp 借阅 时 间 
backtime timestamp 归还 时 间 
operator varchar(30) 操作 人 


ifback tinyint(1) 是 否 归 还 


启动 xampp， 登 录 phpMyAdmin 管 理 界面 ， 创 建 一 个 名 为 WebDB 的 数据 库 ， 然 

















数据 库 中 创建 以 上 所 有 表 结构 ， 并 在 部 分 表 中 输入 基础 数据 。 











18.2.3 登录 页 面 实现 




































































最 后 实现 用 户 登录 验证 ， 下 面 进 行 具体 介 绍 。 
1. 编写 HTML 页 面 代 码 



























































的 登录 页 面 ， 页 面相 关 HIML 代 码 如 下 所 示 : 











<!doctype html> 














后 在 这 个 


登录 页 面 的 实现 首先 需要 编写 HTML 页 面 代码 ， 实 现 登 录 界面 ， 然 后 创建 数据 库 连接 ， 





登录 页 面 是 整个 系统 的 入 口 ， 先 使 用 Dreamweaver 在 创建 的 站 点 下 创建 一 个 名 为 login.php 
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<html> 

<head> 

<meta charset="utf-8"> 
<title> 图 书 管理 系统 </title> 
<style type="text/css"> 
sl 

margin: 0; 

padding: 0; 

body { 

background-color: #66A2EB; 
, 

#1login { 

width: 400px; 

height: 230px; 

margin: 50px auto; 
font-weight: bold; 
text-align: center; 
background-color: #336594; 
border-radius: 10px; 
color:white; 

#1login ul 1i { 
list-style: none; 
margin: 5px auto; 

#1login ul 1i:first-child{ 
margin:30px auto; 
font-size:24px; 
Color:#E47E24; 

1 

#btnsubmit, #btnReset { 
width: 75px; 

height: 24px; 
font-weight: bold; 
font-size: 18px; 

margin: 20px 0 0 0; 
color:white; 
background-color:#35749C; 
} 

#errorMessage { 
font-size: 10px; 

color: red; 

} 

</style> 














<script language="javascript"> 


function check (Eorm) { 
if (form.adminName .Value 





"){ 





document .getElementById ("errorMessage") .innerHTML=" 请 输入 管理 员 名 称 !"; 


form.adminName -focus () 7 
return falses 
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if (form.adminPass.value==""){ 
document .getElementById ("errorMessage"). innerHTML=" 请 输入 管理 员 密 码 !"; 





form.adminPass.focus (); 
return false; 

有 

，， 






<ySczipE> 
</head> 
<body> 
<fieldset id="login"> 
<form id="loginForm" name="loginForm" action="/LibrarySys/index.php" 
method="post"> 
<ul> 
<1li id="title"> 
<span> 图 书 管理 系统 </span> 
</1i> 


<1i><span> 管 理 员 名 称 : </span> 
<input type="text" id="adminName" name="adminName"/> 
下 
<1i><span> 管 理 员 密码 ; </span> 
<input type="password" id="adminPass" name="adminPass"/> 
</1i> 
<1i> 
<input type="submit" id="btnSubmit" name="btnSubmitn" 
onClick="return check (loginForm) ;" value=" 登 录 "/> 
<input type="reset" id="btnReset" name="btnReset" value=" 重 置 "/> 
</1i> 
<1i> 
<label id="errorMessage" name="errorMessage" ></label> 
</1i> 
</ul> 
</form> 
</fieldset> 
</body> 
</html> 


这 个 页 面 的 代码 比较 简单 ， 这 里 就 不 再 发 述 。 需 要 注意 的 是 ， 在 点 击 登 录 按 钮 的 时 候 做 
了 一 个 用 户 名 和 密码 的 JavaScript 非 空 验证 ， 如 果 某 一 项 输入 为 空 ， 则 在 页 面 下 面 的 label 标 签 
中 显示 提示 信息 ， 效 果 如 图 18.7 所 示 。 如 果 用 户 名 和 密码 都 输入 ， 那 么 点 击 登 录 按 钮 后 直接 
进入 index.php 页 

















































































































团 
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国 于 时 和 x 
€ 3 C [ClocalhostLibrarysys/loginphp 窑 | 三 



































在 没有 做 动态 验证 之 前 ， 点 击 登 录 按 钮 直接 进入 index.php 页 面 ， 这 是 因为 我 们 在 login. 
php 页 面 中 的 form 表 单 中 指定 它 的 action 跳 转 地 址 为 iIndex.php 页 面 。 下 面 我 们 要 链接 MySQL 数 
据 库 ， 对 输入 的 用 户 名 和 密码 进行 数据 库 验 证 。 
. 创建 数据 库 连接 
创建 一 个 conn.php 的 页 面 ， 该 页 面 用 于 设置 php 链 接 MySQL 数 据 的 连接 语句 ， 详 细 代 码 如 
下 所 示 : 




























































































Dh 












































<?php 
$conn=mysql_connect ("localhost", "root","") or die(" 数 据 库 服务 器 连接 错误 
".mysql error()); 
mysql_select_db("webDB", $conn) or die ("数据 库 访问 错误 ".mysql error ()); 
mysql query("set names gb2312"); 
?> 


3. 用 户 登录 验证 


创建 一 个 checklogin.php 页 面 ， 并 将 form 表 单 的 action 地 址 指向 该 页 面 ， 点 击 登录 按钮 之 
后 ， 该 页 面 将 接收 login.php 页 面 提交 的 用 户 名 和 密码 ， 然 后 链接 MYSQL 数据 库 ， 从 数据 库 中 
查询 对 应 的 数据 。 如 果 查 询 到 结果 ， 则 表示 登录 成 功 ， 否 则 表示 登录 失败 。 该 页 面 详细 代码 
如 下 所 示 ， 注 意 要 在 第 一 行 指定 页 面 编码 ， 否 则 出 现 错误 时 ， 错 误 信息 将 会 显示 乱码 。 


<meta charset="utf-8"> 

<?php 

session start(); 
$adminName=$_POST['adminName']; 
$adminPass=$_POST['adminPass']; 
class Logini{ 

Var $username; 

Var $userpass; 

function Login ($name, $pass){ 
$this->username=$name; 
Sthis->userpass=$pass; 

和 

function checkLoagin () { 
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include ("conn.php"); 

$sgql=mysql query("select * from tb sysuser Where name="".$this= 
>username."' and pwd='".$this->userpass."'", $conn); 

$info=mysql fetch array($sql); 

if ($info==false){ 

echo "<script language='javascript'>alert(' 用 户 或 密码 错误 ， 请 重新 输入 ! 
');history.back();</script>"; 

return false; 

}elsef 

eeho “<script languages"Javascript”r>alort ("Te 录 成 功 ! ") window: 
location='index.php'</script>"; 

$_SESSION['admin name']=$info['name']; 

$_SESSION['admin pwd']=$info['pwd']; 

return true; 

+t 

; 

$obj=new Login (trim($adminName), trim($adminPass)); 

$0bj->checkLoagin (); 

加 这 


重新 打开 登录 界面 ， 输 入 错误 的 用 户 名 和 密码 ， 然 后 点 击 登录 按钮 ， 此 时 将 显示 登录 
失败 ， 效 果 如 图 18.8 所 示 。 再 次 输入 正确 的 用 户 名 和 密码 ， 点 击 登录 按钮 ， 此 时 显示 登录 成 
功 ， 并 跳 转 到 index.php 页 面 ， 效 果 如 图 18.9 所 示 。 














































































































画 - -Ea 


TocalhosuUbransysci 


了 X | 9 localhost/LibrarySys/checklogin.php 安 | 护 


localhost 上 的 网 页 明示 : 


和 





图 18.8 








296 





第 18 章 使 用 Dreamweaver 创 建 PHP+MySQL 动 态 网 站 





三 IacalhosuUibansysrchr A 
€ 3 X localhostylibr 














18.2.4 系统 主 界面 实现 






































成 功 实现 登录 页 面 后 ， 下 面 我 们 来 设计 系统 的 主 界面 。 我 们 将 主 界面 分 为 3 个 部 分 ， 最 



































1. 添加 logo 和 信息 





上 面 的 一 部 分 为 页 面 的 头 部 ， 中 间 部 分 是 主要 内 容 ， 页 面 的 最 底部 是 版 权 和 其 他 信息 。 































































































<style type="text/css"> 
header { 
background-color: #4C94C1; 
font-weight:bold; 
header div { 
margin-bottom: 1px; 

} 

header div imgf{ 
width:80px; 
height:80px; 
margin:20px 20px Opx 50px; 
3 

header div hilt{ 
display:inline-block; 
Color:#D307EE; 
font-family:" 华 文 彩云 "; 
font-size:50px; 

header div #loginUser { 
text-align:right; 
margin-right:30px; 
padding-bottom:5px; 


页 面 头 部 包含 网 站 的 logo、 名 称 、 当 前 系统 时 间 、 当 前 登录 用 
容 将 是 所 有 页 面 共享 的 内 容 ， 所 以 我 们 单独 为 这 个 部 分 创建 一 个 naviagtion.php 页 面 ， 这 个 页 
面 中 logo、 页 面 名 称 、 当 前 系统 时 间 和 登录 用 户 名 的 HTML 代 码 如 下 所 示 : 








户 名 以 及 导航 条 ， 这 些 内 
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引入 ， 如 果 添 加 这 些 标签 ， 就 会 出 现 标 签 
我 人 


padding-top:5px; 
color:white; 
} 


</style> 

<?2php session start(); ?> 

<header> 

<div> <img src="/LibrarySys/images/10go01.jpg" /> 
<h1> 图 书 管理 系统 </h1> 


<div id="loginUser"> 

<span id="labtime"></span> 

<script type=text/javascript> 

setInterval ("labtime.innerText=new Date() .toLocaleString()",1000) 
</script> 

<span> 当 前 登录 用 户 : <?php echo $_SESSION['admin name']; ?></span> </div> 
</div> 

</header> 


在 这 段 代 码 中 ， 我 们 没有 看 到 html、head 等 标签 ， 这 是 因为 这 个 页 面 将 会 在 其 他 页 面 中 
复 的 问题 。 获 取 当 前 系统 时 间 的 方法 比较 简单 ， 
























































9 

















] 只 需要 设置 一 个 计时 器 ， 每 秒 钟 给 标签 赋值 当前 系统 时 间 即 可 ， 关 键 代 码 如 下 所 示 ; 


setInterval ("labtime.innerText=new Date() .toLocaleString()",1000) 


在 登录 验证 的 时 候 ， 我 们 已 经 将 当前 登录 的 用 户 名 和 密码 存储 在 session 中 ， 所 以 在 这 个 





















































代码 后 ， 需 要 在 index.php 页 面 

















的 开始 使 用 了 以 下 代码 调用 session 。 
<?php session start(); ?> 


然后 在 需要 输出 用 户 名 的 地 方 再 次 使 用 php 从 session 中 获取 到 当前 的 用 户 名 。 编 写 完 以 上 
ph 引入 这 个 文件 ，index.php 页 面 的 代码 如 下 所 示 : 




















































































































如 



































<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 图 书 管理 系统 </title> 
<style type="text/css"> 
ee 

margin: 0; 

padding: 0; 

3 

body { 

width: 800px; 

margin: 0 auto; 

站 

</style> 

</head> 

<body> 

<?php 

include ("navigation.php"); 
2 
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</body> 
</html> 


有 的 include 就 是 将 指定 的 页 








这 和 


团 

















18.10 所 示 。 


[GE x 


CB localhost/LibrarySys/index ph 





引入 当前 页 面 ， 运 行 这 段 代 码 ， 登 录 成 功 


2015/9/27 上 午 4:29-54 当 痢 登录 用 户 ，zdmin 











图 18.10 








2. 添加 导航 

















后 的 效果 如 医 

















页 面 的 头 部 同样 也 包含 一 个 导航 菜单 ， 我 们 将 其 设置 为 



























































面 还 没有 创建 ， 所 以 暂时 先 将 各 个 链接 的 hred 属 性 设置 为 #， 


<style type="text/css"> 
nav ul 1i { 

list-style: none; 

float: left; 

position: relative; 
margin-right: lpx; 

nav ul liat 
text-decoration: none; 
display: block; 
padding: S5px; 

color: white; 
background-color: #4E85EA; 
font-size:9px; 


nav ul li:hover a { 
background-color: #374256; 


nav ul li ul { 
display: none; 


nav ul li:hover ul { 
display: block; 
position: absolute; 


nav ul li:hover ul li { 
margin-top: lpx; 





nav ul li:hover ul liaf{ 
display: block; 
background-color: #374256; 
width: 100px; 

+ 





相关 代码 如 下 所 示 : 











对 应 的 
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nav ul li:hover ul 1i a:hover { 
color: white; 

background-color: #316893; 

和 

</style> 

<header> 

<nav> 

<ul> 

<1i><a href="#"> 首 页 </a></1i> 














<1i><a href="#"> 借 阅 管理 </a> 
<ul> 

<1i><a href="#"> 图 书 借阅 </a></1i> 
<1i><a href="#"> 图 书 续 借 </a></1i> 
<1i><a href="#"> 图 书 归 还 </a></1i> 
</ul> 

< 过 /> 

<1i><a href="#"> 读 者 管理 </a> 

<ul> 

<li><a href="#"> 读 者 类 型 管理 </a></1i> 
<1i><a href="#"> 读 者 档案 管理 </a></1i> 
</ul> 

</1i> 

<1i><a href="#"> 图 书 管理 </a></1i> 
<1i><a href="#"> 系 统 设置 </a> 
<ul> 

<1i><a href="#"> 图 书 类 型 </a></1i> 
<1i><a href="#"> 出 版 社 </a></1i> 
<1i><a href="#"> 权 限 </a></1i> 
<1i><a href="#"> 用 户 </a></1i> 
</ul> 

oli 

<1i><a href="#"> 更 改 密码 </a></1i> 
<li><a 

</ul> 

</nav> 

</header> 


运行 这 段 代码 后 ， 将 鼠标 停留 在 导航 菜 





单 上 ， 


效果 如 图 18.11 所 示 。 





回归 x 


4 © DD localhost/LibrarySys/index.php 


localhost/LibrarySys/index. phps 








[出 











2015/9/27 上 午 4:36:36 当前 登录 用 户 : 





18.11 


-En 
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3. 添加 主体 内 容 


首页 中 的 主体 内 容 将 显示 当前 系统 图 书 借阅 排行 榜 ， 我 们 使 用 表格 来 显示 这 些 数据 。 首 
先 编写 一 个 静态 页 面 ， 相 关 代码 如 下 所 示 : 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<tit1le> 图 书 管理 系统 </title> 
<style type="text/css"> 
section { 

clear: both; 

padding-top:1px; 

; 

section imgf 

width:25px; 

height:25px; 

¥ 

section spant{ 
font-weight:bold; 
margin-left:10px; 

上 

section table tr { 

font-size: 9px; 

. 

section table tr:first-child { 
text-align: center; 
background-color: #B72729; 
font-weight: bold; 

color: white; 

} 

section table tr:nth-child(2n) { 
background-color:#B4D6E0; 

有 

</style> 

</head> 

<body> 

<section> 

<img src="/LibrarySys/images/bookorder.png" /><span> 图 书 借阅 排行 榜 </span> 
<table cellspacing="0"> 

<tr id="theader"> 

<td width="50px" height="25"> 排 名 </td> 
<tqd width="120px"> 图 书 条 形 码 </td> 
<td width="150px"> 图 书 名 称 </td> 
<tqd width="100px"> 图 书 类 型 </td> 
<td width="150px"> 出 版 社 </td> 
<td width="150px"> 作 者 </td> 
<tqd width="75pzx"> 定 价 (元 ) </td> 
<tqd width="75px"> 借 阅 次 数 </td> 
</tr> 

<?php 

$i=]1; 

dof{ 

六 学 
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七 在 > 

<tqd height="25" align="center"> 排 名 </td> 
<td style="padding:5px;"> 图 书 条 形 码 </td> 
<td style="padding:5px;"> 图 书 名 称 </td> 
<td style="padding:5pzx;"> 图 书 类 型 </td> 
<td align="center"> 出 版 社 </td> 

<td align="center"> 作 者 </td> 

<td align="center"> 定 价 (元 ) </td> 

<td align="center"> 借 阅 次 数 </td> 

</Er> 

<?php 

$i=$i+1; 

}while ($i<10) 

> 

</table> 

</section> 

</body> 

</html> 


文 段 代 码 中 ， 表 头 只 显示 了 一 行 ， 而 数据 行 则 通过 一 个 循环 ， 显 示 了 一 些 静 态 数据 。 
运行 这 段 代 码 后， 效果 如 图 18.12 所 示 。 











-°°-mn 


[be 日 
€ © dloaho/bia dor ph 一 


2015/9/27 上 年 4:52:04 当前 弥 及 用 户 ，win 



















































































图 18.12 
下 面 需要 通过 查询 从 数据 库 中 获取 这 些 数据 ， 在 页 面 的 开始 部 分 引入 数据 库 连接 ， 代 码 
如 下 : 
include ("conn.php"); 
然后 在 do.…while 的 前 面 通 过 php 查 询 数据 库 中 图 书 的 信息 ， 并 返回 结果 ， 相 关 代码 
如 下 : 





<?php 

$sql=mysql query("select * from (select bookid,count (bookid) as 
degree from tb borrow group by bookid) as borr join (select b.*,c.name as 
bookcasename,p.pubname,t.typename from tb bookinfo b left join tb bookcase c 
on b.bookcase=c.id join tb publishing p on b.ISBN=p.ISBN join tb booktype t 
on b.typeid=t.id where b.del=0) as book on borr.bookid=book.id order by borr. 
degree desc limit 10"); 





302 





第 18 章 使 用 Dreamweaver 创 建 PHP+MySQL 动 态 网 站 








$info=mysql fetch array($sql); 
T= 
dof{f 


同时 还 要 修改 while 的 条 件 ， 代 码 如 下 : 


<?php 

$i=$i+1; 

}while ($info=mysql fetch array($sql)); 
?> 


运行 这 段 代码 后 ， 效 果 如 图 18.13 所 示 。 

















-En 


[mE * 
€ 3 C [BD localhosVLibrarysys/indexphp 


2015/9/27 上 午 6:03:29 当前 痘 录用 户 : admin 








| 


18.13 











4. 添加 底部 信息 


网 页 的 底部 信息 是 一 个 静态 页 面 ， 创 建 一 个 名 为 footer.php 的 页 面 ， 在 该 页 面 中 编写 以 下 
代码 : 


<meta charset="gb2312"> 

<style type="text/css"> 

footert{ 

margin-top: 5px; 

3 

footer Pi 

text-align:center; 

font-size:9px; 

} 

</style> 

<footer> 

<hr> 

<p>CopyRight gcopy; 2015 *** 图 书馆 <br> 
Tel:010-22225555&gnbsp; gnbsp; gnbsp; Email:***#@**#* .COm</P> 
</div> 

</footer> 



























































回 
al 
回 

















使 用 以 下 代码 引入 footerphp 页 





在 index.php 页 
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2 








<?php 


3 六 


信息 </a> 





<?php 
include ("footer.php"); 

















运行 这 段 代码 后 ， 效 果 如 图 18.14 所 示 。 


盏 - -EN 


[BE x 
€ 3 © [D localhost/librarysys/indexphp 





2015/9/27 上 午 6:07:36 当前 登录 用 户 : sqmin 





| 4 

2 065155 J ss 大 设计 > EE 下 下 如 加 
3 re Tewsseript 奏 席 计 3 no 天 2, a 
4 中 国 近代 吧 4 es EL 可 站 


5 
T0105 了 








图 18.14 








18.2.5 读者 管理 


读者 管理 模块 主要 包括 读者 类 型 管理 和 读者 档案 管理 两 个 部 分 ， 这 两 个 部 分 都 实现 了 基 
础 信息 的 展示 功能 。 


1. 读者 类 型 管理 
新 建 一 个 名 为 readertype.php 的 页 面 ， 在 该 页 面 中 编写 以 下 代码 : 


<!ldoctype html> 

<html> 

<head> 

<meta charset="gb2312"> 

<title> 图 书 管理 系统 </title> 

<link type="text/css" href="/LibrarySys/css/style.css" rel="stylesheet"/> 
</head> 

<body> 















































include ("navigation.php"); 
include ("conn.php"); 


<section> <img src="/LibrarySys/images/bookorder.png" /><span> 读 者 类 型 </ 
span> <a id="addreaderlink" href="/LibrarySys/readertypeedit.php" > 添加 读者 类 型 


<table cellspacing="0"> 
<tr id="theader"> 


<tqd width="400px"” height="25"> 读 者 类 型 名 称 </td> 
<tqd width="200px"> 借 阅 数量 </td> 
<tqd width="200px"> 编 辑 &gnbsp; 删 除 </td> 
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二 多 七 工 > 

<?php 
$sql=mysql query("SELECT * FROM tb readertype"); 
$info=mysql fetch array($sql); 


$i=1; 
dof{ 
让 
<tr> 
<td height="25" align="center"><?php echo $info[ ‘name’ ] ?></td> 
<td align="center" ><?php echo $info[ ‘number’ ] ?></td> 


<td align="center" ><a href="readertypeedit.php?id=<?php echo 
$info['id'] ?>"> 编 辑 </a>&nbsp;<a href="readertypedel.php?id=<?php echo 
$info['id'] ?>"> 删 除 </a></td> 
</tr> 
<?php 
$i=$i+1; 
}while ($info=mysql fetch array($sql)); 
if ($i<10)1{ 
for ($i;$i<=20;$i++) { 



















































































?> 
RE 
<td height="25" align="center"></td> 
<td align="center" ></td> 
<td align="center" ></td> 
</tr> 
<?php 
} 
} 
Ee 
</table> 
</section> 
<?php 
include ("footer.php") 
全 
</body> 
</html> 
在 这 段 代码 中 ， 页 面 的 主体 风格 与 主 界面 类 似 ， 右 上 角 的 “添加 读者 信息 ” 超 链 接 对 应 
readertypeadd.php 页 面 ， 添加 新 的 读者 类 型 ， 每 行 关 剖 有 局 加 于 入 一 个 “编辑 ”和 “ 删 
除 ” 超 链接 ， 分 别 对 应 readertypeeditphp 和 readertypedelphp 页 面 ， 用 于 对 当前 数据 进行 编辑 






































TT 























操作 ， 另 外 还 有 一 个 操作 页 面 readertypeupdate.php， 用 于 执行 更 改 操作 并 显示 操作 结果 。 读 
者 类 型 管理 主 界面 效果 如 图 18.15 所 示 。 
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其 他 几 个 php 页 面 的 代码 如 下 所 示 。 


readertypeadd.php 

<meta charset="gb2312"> 

<?php 

include ("conn.php"); 

$name=$_POST[ ‘readtypename’ ]; 

$number=$ POSTI[ ‘borrownumber’ ]; 

$query_ins=mysql query("insert into tb readertype (name,number) 
values( ‘$name’ ,’ $number’” )"); 

if ($query ins){ 








echo "<script language='javascript'>alert(' 添 加 成 功 ! ') ;window.1location. 
href='/LibrarySys/readertype.php';</script>"; 

}elsef{ 

echo "<script language='javascript'>alert(' 添 加 失败 ! ') ;window.location. 


href='/LibrarySys/readertype.php';</script>"; 
是 之 


添加 读者 类 型 的 界面 效果 如 图 18.16 所 示 。 














网 


18.16 
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readertypeedit.php 
<?php session start();?> 
<!doctype html> 
<html> 
<head> 
<meta charset="gb2312"> 
<title> 添 加 读者 类 型 信息 </title> 
<link type="text/css" href="/LibrarySys/css/style.css" rel="stylesheet"/> 
<script language="javascript"> 
function check (form){ 
if (form.readtypename .value==""){ 
document .getElementById ("errorMessage") .innerHTML=" 请 输入 类 型 名 称 !"; 
form.readtypename.focus (); 
return false; 
} 
if (form.borrownumber.value=="")1{ 
document .getElementById ("errorMessage") .innerHTML=" 请 输入 借阅 数量 !"; 
form.borrownumber.focus (); 
return false; 
} 
} 
EC 
</head> 
<body> 
<?php 
include ("navigation.php"); 
include ("conn.php"); 
$action=""; 
if($ GET[ ‘id’” ]==""){ 
$action="readertypeadd.php"; 
}elsef 
$sql=mysql query("SELECT * FROM tb readertype where id=’ ".$ 
GETI dl en wy 
$info=mysql fetch array($sql); 
$action ="readertypeupdate.php"; 
} 
> 
<div id="edit"> 
<form id="readertypeform" name="readertypeform" action="<?php echo 
$action ?>" method="post"> 














<table> 
<tr><td> 读 者 类 型 : </td><td><input type="text" id="readtypename" 
name="readtypename" value="<?php if($ GET['id']!="") {echo $info['name'];} 


else {echo "™";} ?2>"/></td></tr> 
<tr><td> 借 阅 数量 : </td><td><input type="text" id="borrownumber" 

name="borrownumber" value="<?php if($ GET['id']!="") {echo $info['number'];} 
else {echo "";} ?>"/> (本 ) </td></tr> 

<tr><td colspan="2" align="center"><input class="btn" type="submit" 
onClick="return check(readertypeform)" value=" 保 存 " />&nbsp;<input class="btn" 
type="button" value=" 返 回 " onClick="window.location.href='/LibrarySys/ 
readertype.php'" /></td></tr> 
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<tr><td colspan="2" align="center"><label id="errorMessage" 
name="errorMessage" ></label><input type="hidden" name="id" value="<?php if($_ 
GET[ ‘id” 1 1echo $info[l id ];} else {echo "wy 2>"/>S</td></tr> 
</table> 
</form> 
</div> 
<?php 
include ("footer.php") 
让 
</body> 
</html> 


编辑 读者 类 型 的 界 











18.17 所 示 。 























六 
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出 





readertypedel .php 

<meta charset="gb2312"> 
<?php 

include ("conn.php"); 
$id=$ GET['id']; 


$result=mysql_ query ("delete from tb readertype where id='".$id."™'"); 

if($result==true){ 

echo "<script language='javascript'>alert(' 删 除 成 功 ! ') ;window.1location. 
href='/LibrarySys/readertype.php';</script>"; 

}elsef{ 

echo "<script language='javascript'>alert(' 删 除 失 败 ! ');window.location. 


href='/LibrarySys/readertype.php';</script>"; 
3 
Es 
readertypeupdate .php 
<meta charset="gb2312"> 
<?php 
include ("conn.php"); 
$id=$ POST['id']; 
$name=$ POST['readtypename']; 
$number=$ POST['borrownumber']; 
$result=mysql query ("update tb readertype set name='".S$name."',number="'".$ 
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number."' where id="'".$id."™'"); 

if($result==true){ 

echo "<script language='javascript'>alert(' 修改 成 功 ! ') ;window.1location. 
href="'/LibrarySys/readertype.php';</script>"; 

}elsef{ 

echo "<script language='javascript'>alert(' 修 改 失 败 ! ') ;window.1location. 


href="'/LibrarySys/readertype.php';</script>"; 


有 关 

2. 读者 档案 管理 

读者 档案 管理 与 读者 类 型 管理 都 属于 基础 信息 管理 ， 它 们 在 页 面 展 示 和 业务 处 理 方面 都 
是 类 似 的 ， 读 者 可 以 在 本 章 资源 中 获取 到 相关 代码 ， 这 里 就 不 再 发 述 。 该 界面 效果 如 图 18.18 
所 示 。 

























































































18.2.6 其 他 基础 信息 管理 


该 系统 中 还 有 很 多 其 他 基础 信息 ， 它 们 的 处 理 方式 与 读者 管理 界面 类 似 ， 很 多 代码 都 可 
义 拿 来 重复 使 用 ， 这 里 就 不 再 发 述 ， 只 展示 相关 界面 的 效果 。 如 图 18.19 所 示 为 图 书 管理 界 
， 如 图 18.20 所 示 为 图 书 类 型 管理 界面 ， 如 图 18.21 所 示 为 出 版 社 管理 界面 ， 如 图 18.22 所 示 
为 用 户 管理 界面 。 
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18.19 图 18.20 
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18.2.7 修改 密码 









































<?php session start();?> 
<!doctype html> 

<html> 

<head> 

<meta charset="gb2312"> 


function check (form){ 


form.oldpwd.focus (); 
return false; 
上 


form.newpwd.focus () 7 
return false; 
3 


return false; 


form.newpwd.focus(); 
return false; 








修改 密码 功能 用 于 修改 系统 用 户 密码 ， 页 

















<tit1le> 添 加 读者 类 型 信息 </title> 
<link type="text/css" href="/LibrarySys/css/style.css" rel="stylesheet"/> 
<script language="javascript"> 


if (form.oldpwd.value==""){ 
document .getElementById ("errorMessage"). innerHTML=" 请 输入 旧 密 码 ! 村 


if (form.newpwd.value==""){ 
document .getElementById ("errorMessage") .innerHTML=" 请 输入 新 密码 !"; 


if (form.confirmewpwd.value==""){ 
document .getElementById ("errorMessage") .innerHTML=" 请 输入 确认 密码 !"; 
form.confirmnewpwd.focus (); 





18.22 











面 passwordedit.php 相 关 代 码 如 下 所 示 : 


if (form.newpwd.value!= form.confirmnewpwd.value){ 
document .getElementByIlId ("errorMessage"). innerHTML=" 两 次 输入 的 新 密码 不 一 致 Ve 
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， 
证 
</script> 
</head> 
<body> 
<?php 
include ("navigation.php"); 
include ("conn.php"); 
> 
<div id="edit"> 
<form id="passwordupdateform" name="passwordupdateform" action="/ 
LibrarySys/passwordupdate.php" method="post"> 
<table> 
<tr><td> 用 户 名 : </td><td><?php echo $ SESSION['admin name'] ?></ 
td></tr> 
<tr><td> 旧 密码 : </td><td><input type="password" id="oldpwd" name="oldpwd" 
/></td></tr> 
<tr><td> 新 密码 : </td><td><input type="password" id="newpwd" 
name="newpwd" /></td></tr> 
<tr><td> 重 复 新 密码 : </td><td><input type="password" 
id="confirmnewpwd" name="confirmnewpwd" /></td></tr> 
<tr><td colspan="2" align="center"><input class="btn" 
type="submit" onClick="return check(passwordupdateform)" value=" 保 存 " 
/>&nbsp;<input class="btn" type="button" value=" 返 回 " onClick="window.location. 
href='/LibrarySys/index.php'" /></td></tr> 
<tr><td colspan="2" align="center"><label id="errorMessage" 
name="errorMessage" ></label><input type="hidden" name="id" value="<?php echo 
$_SESSION[ ‘admin id”] ?>" /></td></tr> 
</table> 
</form> 
</div> 
<?php 
include ("footer.php") 
人 
</body> 
</html> 


修改 密码 的 逻辑 处 理 在 passwordupdate.php 页 


<meta charset="gb2312"> 

<?php 

include ("conn.php"); 

$id=$_POST['id']; 

$oldpwd=$_POST['oldpwd']; 

Snewpwd=$_POST['newpwd']; 

$sql=mysql query("select * from tb sysuser where id="'".$id."'",$conn); 

$info=mysql fetch array($sql); 

if($info['pwd']!=$oldpwd){ 

echo "<script language='javascript'>alert(' 您 输入 的 旧 密 码 有 误 ， 请 重新 输入 ! 
history :bace(l </script>*> 

return false; 








团 
呈 





ph 完成， 相关 代码 如 下 所 示 : 
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$sql="update tb sysuser set pwd='".Snewpwd."' where id="" .Sid." "7 

$result=mysql _ query($sq1) 7 

ifE(S$result==true){ 

echo "<script language='javascript'>alert(' 修 改 成 功 ! ') ;window.location- 
href='/LibrarySys/index.php';</script>"; 

jelsetf 

echo "<script language='javascript'>alert(' 修 改 失败 ! ') ;window.1location. 
href='/LibrarySys/index.php';</script>"; 

a 

全 


修改 密码 的 主 界面 效果 如 图 18.23 所 示 。 























201WS/S 上 午 1:18:05 当前 痊 录 用 户 。sdain 











Es ioe vel 





图 18.23 


18.2.8 退出 功能 


























系统 退出 功能 主要 在 logout.php 页 面 中 完成 ， 该 页 面 主 要 功能 用 于 清除 session 和 重 定向 到 


























login 页 面 ， 相 关 代码 如 下 所 示 : 


<?php 

session start(); 

session unset (); 

session destroy(); 

header ("location:login.php"); 
ea 
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网 站 制作 完成 后 ， 需 要 将 网 站 上 传 到 网 络 空间 ， 并 给 网 络 空间 绑 定 域名 ， 这 样 其 他 人 就 
可 以 在 互联 网 上 通过 域名 来 访问 这 个 网 站 了 。 





19.1 申请 域名 

















一 个 好 的 域名 不 但 方便 记忆 ， 而 且 对 于 网 站 后 期 的 推广 也 有 很 好 的 作用 。 例 如 国内 大 家 
都 熟知 的 百度 (baidu.com) 、 腾 讯 (qq.com) 、 淘 宝 (taobao.com) 、 京 东 (jd.com ) 等 。 
本 节 将 详细 介绍 与 域名 有 关 的 知识 。 


19.1.1 什么 是 域名 


我 们 都 知道 ， 琴 地 址 是 互联 网 上 区 别 每 全 电脑 的 唯一 标识 ， 但 是 卫 地 址 比较 长 ， 不 方便 
记忆 ， 也 不 好 区 分 ， 所 以 人 们 就 给 ip 地 址 带 了 一 个 面具 ， 这 个 面具 就 是 域名 。 每 个 域名 和 一 
个 下 地 址 绑 定 ， 当 用 户 访问 域名 的 时 候 ， 域 名 解析 服务 (DNS ) 就 会 将 用 户 访问 的 域名 自动 
解析 为 具体 的 耳 地 址 。 

域名 由 若干 字母 、 数 据 或 文字 组 成 ， 在 互联 网 上 域名 具有 唯一 性 ， 如 果 要 使 用 域名 ， 必 
须 先 在 域名 服务 商 那里 申请 域名 ， 域 名 的 申请 遵循 先 注册 先 得 的 原则 。 目 前 国际 项 级 域名 ， 
如 .com、.net 等 简短 好 记 的 域名 已 经 基本 上 都 被 注册 了 ; 而 国内 项 级 域名 ， 如 .cn、com.cn 等 
简短 好 记 的 域名 也 所 剩 不 多 了 。 


19.1.2 实例 :申请 域名 
























































































































































































































































下 


我 们 以 在 万 网 注册 域名 为 例 ， 详 细 介 绍 申请 域名 的 整个 过 程 ， 具 体 步骤 如 下 所 示 ; 


在 浏览 器 中 打开 万 网 地 址 http:Wwanwang.aliyun.com/， 如 图 19.1 所 示 ， 在 网 页 的 左下 
角 点 击 “ 域 名 服务 ”。 
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CE 7 
人 二 [wawangayuncom 

















car 记 用 本人 此 要 芝 -还 可 二 





网 
忆 
2 
二 











在 新 打开 的 网 页 中 ， 我 们 可 以 看 到 一 个 很 大 的 输入 框 ， 在 这 个 输入 框 中 输入 要 注册 
的 域名 ， 例 如 输入 xinwangmeng， 如 图 19.2 所 示 。 然 后 点 击 后 面 的 “ 查 域名 ”按钮 ， 就 可 以 查 


询 到 当前 这 个 域名 的 相关 信息 。 








mm 2 ee > 
Om me » s om 
了 cx 
LF = 
图 19.2 














在 图 19.3 中 显示 了 查询 结果 ， 我 们 可 以 看 到 xinwangmeng.com 这 个 国际 顶级 域名 已 经 
被 其 他 人 注册 了 ， 而 且 正 在 二 次 销售 。 所 以 ， 如 果 我 们 一 定 要 用 这 个 域名 ， 就 必须 向 域名 目 
前 的 所 有 者 购买 ， 如 果 不 是 必须 的 ， 我 们 还 可 以 选择 后 缀 为 .cn、.net 等 的 其 他 域名 。 
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图 193 





ni 国 





图 19.4 


辆 点击“ 去 结算 ”按钮 ， 打 开 购物 车 列表 页 面 ， 如 图 19.5 所 示 ， 在 该 页 面 中 选择 域名 的 
购买 年 限 为 1 年 。 后 期 还 需要 用 户 上 传 相关 资料 进行 备案 ， 所 以 这 里 需要 确定 当前 申请 的 域 
名 将 用 于 个 人 还 是 企业 ， 这 里 我 们 选择 “个 人 ”， 最 后 点 击 “ 立 即 购买 ”。 
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图 19.5 


注意 在 购买 万 网 域名 之 前 ， 需 要 注册 阿里 去 账户 ， 登 录 后 系统 会 跳 转 到 结算 页 面 ， 
要 求 用 户 填写 该 域名 相关 资料 。 如 图 19.6 所 示 ， 按 照 页 面 要 求 填写 相关 资料 。 
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图 19.6 


加 最 后 点 击 “ 结 算 ” 按 钮 ， 进 入 支付 界面 ， 如 图 19.7 所 示 ， 选 择 方便 的 支付 方式 进行 支 
付 ， 即 可 完成 域名 的 申请 。 
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人 ,2 申请 网 站 空间 

















网 站 空间 的 质量 直接 决定 了 网 站 访问 的 速度 和 稳定 性 ， 所 以 在 申请 网 站 空间 的 时 候 ， 一 
定 要 选择 一 个 速度 快 并 且 性 能 稳定 的 服务 提供 商 。 


19.2.1 网 站 空间 简介 


网 站 空间 就 是 存放 网 站 内 容 的 空间 。 当 然 也 可 以 将 网 站 存放 在 自己 的 电脑 上 ， 然 后 向 外 
发 布 程序 ， 其 他 人 可 以 通过 自己 电脑 的 ip 地 址 访问 到 发 布 的 网 站 。 但 是 多 数 情况 下 ， 我 们 自 
己 的 电脑 配置 都 不 高 ， 而 且 不 能 保证 全 天 候 开机 ， 所 以 最 好 还 是 将 网 站 存放 在 专业 的 网 站 空 
间 中 。 

网 站 空间 也 叫做 虚拟 主机 空间 ， 是 专业 存储 网 站 内 容 的 地 方 ， 按 照 网 站 空间 的 形式 ， 可 
义 分 为 虚拟 空间 、 合 租 空 间 和 独立 空间 。 虚 拟 空间 是 目前 使 用 最 多 的 一 种 形式 ， 不 仅 成 本 低 
廉 ， 而 且 提供 技术 支持 和 空间 维护 ， 而 合租 空间 和 独立 主机 则 适用 于 中 型 或 大 型 网 站 ， 他 们 
需要 更 多 的 空间 和 更 稳定 的 运行 。 
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19.2.2 实例 :申请 网 站 空间 





























下 面 同样 以 申请 万 网 的 网 站 空间 为 例 ， 详 细 介 绍 申请 网 站 空间 的 过 程 。 


(1) 打开 万 网 主页 http://wanwang.aliyun.com/， 如 图 19.8 所 示 ， 可 以 看 到 主机 服务 一 栏 ， 
点 击 “ 主 机 服务 ”。 
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图 19.8 















































(2) 打开 虚拟 主机 申请 页 面 ， 如 图 19.9 所 示 。 在 这 个 页 面 中 ， 我 们 可 以 看 到 多 种 类 型 的 网 
站 空间 ， 每 个 网 站 空间 的 配置 都 不 一 样 ， 所 以 购买 的 价格 也 不 一 样 ， 配 置 越 高 的 空间 价格 越 高 。 
(3) 以 共享 经 济 版 的 网 站 空间 为 例 ， 点 击 “ 立 即 购买 ”按钮 ， 打 开 主 机 购买 界面 ， 如 
图 19.10 所 示 。 在 该 页 面 中 选择 产品 名 为 “共享 经 济 版 ”， 机 房 默认 为 “青岛 机 房 ”， 操 作 系 
统 选择 Windows， 其 他 基本 配置 是 服务 提供 商 为 这 款 产 品 设置 的 基本 配置 ， 购 买 时 长 选择 “1 
年 ”， 然 后 点 击 “ 立 即 购 买 ”按钮 。 
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图 19.10 

















(4) 打开 支付 页 面 ， 如 























请 操作 。 














漳 





19.11 所 示 ， 完 成 剩余 的 支付 流程 ， 这 样 就 完成 了 网 站 空间 的 











图 19.11 


人 9.3 绑 定 域名 和 空间 























请 了 域名 和 


站 空间 之 








操作 ， 这 样 在 互联 








后 ， 还 需要 在 空间 提供 商 的 管理 平台 上 进行 域名 和 空间 的 绑 定 











上 访问 域名 的 时 候 才 能 访问 到 网 站 空间 的 内 容 。 点 击 万 网 首页 上 的 “ 科 
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理 控 制 台 ”链接 ， 如 图 19.12 所 示 。 
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加 a 邻 5m 
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图 19.12 


























19.13 所 示 的 页 面 ， 在 该 页 面 左 侧 的 导航 栏 中 点 击 “ 云 虚拟 主机 ”菜单 。 
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图 19.13 























打开 如 图 19.14 所 示 的 页 面 ， 该 页 面 中 已 经 有 一 个 虚拟 主机 列表 ， 在 最 右 侧 的 红色 区 
点 击 “ 管 理 ”， 打 开 虚 拟 主机 管理 界面 。 
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19.14 















































如 图 19.15 所 示 ， 在 该 页 面 的 左 侧 列 表 中 选择 “基础 环境 设置 ”菜单 ， 选 择 “ 域 名 绑 定 ” 
子 菜单 ， 就 可 以 看 到 右 侧 页 面 ， 选 中 “ 绑 定 域名 ”选项 ， 输 入 新 的 域名 ， 然 后 单 击 “ 添 加 ” 


按钮 ， 即 可 将 输入 的 域名 与 当前 主机 绑 定 到 一 起 。 


use RY 
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图 19.15 
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第 20 章 测试 、 上 传 与 维护 网 站 


网 站 开发 完成 后 ， 需 要 对 网 站 进行 一 系列 的 测试 ， 保 证 网 站 能 正常 运行 。 首 先进 行 本 地 
测试 然后 将 网 站 上 传 至 网 站 空间 ， 进 行 在 线 测 试 。 另 外 ， 网 站 内 容 需 要 及 时 维护 和 更 新 ， 从 
而 保证 网 站 健康 运行 。 




















20.1 站 点 的 测试 





网 站 开发 完成 后 ， 先 在 本 地 站 点 发 布 ， 通 过 本 地 测试 是 检验 网 站 的 第 一 个 步骤 。 网 站 测 
试 的 方法 和 内 容 很 多 ， 下 面 介绍 几 种 常见 的 测试 方法 。 


20.1.1 功能 测试 


功能 测试 又 称 为 黑 盒 测试 或 数据 驱动 测试 ， 它 把 测试 对 象 看 作 一 个 黑 盒子 。 利 用 黑 盒 测 
试 法 进行 动态 测试 时 ， 只 需要 测试 软件 产品 的 功能 ， 而 不 需要 知道 其 内 容 结构 和 处 理 过 程 。 

功能 测试 主要 是 为 了 检测 软件 产品 是 否 存 在 功能 性 错误 或 遗漏 ， 软 件 界面 是 否 存 在 错 
误 ， 数 据 结构 或 外 部 数据 库 访 问 是 否 错误 ， 性 能 是 否 满足 要 求 ， 以 及 初始 化 和 终止 功能 是 否 












































































































































































































































下 面 介绍 一 些 常 用 的 功能 测试 方法 。 

(1) 相关 性 检查 : 检查 在 界面 上 进行 增删 改 操作 是 否 会 影响 其 他 内 容 的 变化 ， 这 些 变 
化 是 否 正常 。 

(2) 检查 相关 按钮 的 功能 : 每 一 个 按钮 都 有 自己 对 应 的 功能 ， 检 查 这 些 按钮 对 应 的 功 
能 是 否 正确 。 

(3) 超 链接 检查 : 检查 界面 上 的 每 个 超 链接 是 否 有 对 应 的 页 面 ， 点 击 超 链接 后 切换 页 
面 是 否 正确 。 

(4) 字符 串 长 度 检 查 : 检查 界面 输入 框 中 能 输入 的 字符 串 是 否 有 长 度 限 制 ， 兴 试 输入 
最 大 长 度 限 制 的 字符 串 ， 检 查 是 否 会 引发 错误 

(5) 输入 类 型 检查 : 检查 界面 输入 框 中 的 内 容 是 否 有 类 型 要 求 ， 如 年 龄 只 能 输入 数 
字 ， 如 果 输 入 其 他 类 型 将 引发 错误 。 












































(6) 信息 唯一 性 检查 : 在 界面 输入 的 信息 中 ， 是 否 存 在 唯一 性 要 求 ， 如 账号 等 ， 如 果 
有 检查 其 唯一 性 。 
7) 按 条 件 查询 检查 : 在 按 条 件 查询 的 界面 中 ， 输 入 不 同 的 查询 条 件 ， 检 查 输 出 的 内 


( 
容 是 否 正确 。 
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(8) 必 填 项 检查 :; 检查 界面 中 多 个 提交 信息 中 ， 所 有 的 必 填 项 是 否 都 有 数据 ， 如 果 没 
有 ， 在 提交 操作 之 前 是 否 有 提示 。 

(9) 重复 提交 表单 : 检查 在 成 功 提交 表单 之 后 ， 点 击 后 退 按钮 再 次 提交 ， 系 统 对 二 次 
提交 的 表单 如 何 处 理 。 

(10) 中 文字 符 处 理 : 在 可 以 输入 中 文 的 系统 输入 中 文 ， 检 查 是 否 会 出 现 乱 码 。 

(11) 上 传 下 载 文件 检查 : 检查 上 传 与 下 载 文件 的 功能 是 否 能 够 实现 ， 上 传 文件 是 否 能 
够 浏览 。 对 上 传 文件 的 格式 是 否 有 规定 ， 系 统 是 否 有 解释 信息 。 


20.1.2 浏览 器 兼容 性 测试 


浏览 器 是 Web 系 统 中 一 个 非常 重要 的 组 成 部 分 ， 它 将 直接 与 用 户 进行 交互 。 同 一 个 网 站 
在 不 同 的 浏览 器 上 可 能 会 有 不 同 的 效果 ， 而 目前 用 户 可 以 选择 的 浏览 器 却 非常 多 ， 所 以 ， 为 
了 保证 大 多 数 用 户 都 能 正常 浏览 网 站 ， 我 们 有 必要 对 浏览 器 的 兼容 性 进行 测试 。 
虽然 目前 市 面 上 的 浏览 器 种 类 非常 多 ， 但 是 影响 浏览 器 兼容 性 的 主要 原因 还 是 在 于 浏览 
器 的 内 核 。 所 谓 浏览 器 的 内 核 ， 就 是 指 它 的 泻 染 引 擎 。 目 前 市 面 上 比较 流行 的 浏览 器 内 核 可 
义 分 为 以 下 几 种 。 


(1) Trident:， 大 名 易 易 的 了 浏览 器 使 用 的 就 是 Trident 内 核 ， 它 也 是 目前 市 面 上 最 流行 、 
户 数量 最 多 、 使 用 范围 最 广 的 一 个 浏览 器 内 核 。 国 内 很 多 的 浏览 器 也 是 基于 Trident 内 核 开 
发 的 ， 如 授 游 浏览 器 、 搜 狗 浏 览 器 、 世 界 之 窗 浏览 器 等 等 。 

(2) Gecko: Gecko 是 一 款 用 C++ 编写 的 泻 染 引擎 ， 它 的 源码 是 开放 的 。 火 狐 浏览 器 使 
的 就 是 Gecko 内 核 。 

(3) Webkit，Webkit 是 Mac OS X v10.3 及 以 上 版 本 所 包含 的 软件 框架 ， 它 是 Mac OS X 的 
Safari 网 页 浏览 器 的 基础 。 谷 歌 浏览 器 使 用 的 就 是 Webkit 内 核 。 

(4) Presto: Presto 是 一 个 由 Opera Software 开 发 的 浏览 器 排版 引擎 ， 它 取代 了 旧版 Opera 
中 所 使 的 Elektra 排 版 引擎 ， 加 入 了 动态 功能 。 例 如 ， 网 页 或 其 他 部 分 可 随 着 DOM 及 Script 
语法 的 事件 而 重新 排版 。 


在 对 网 站 进行 浏览 器 兼容 性 测试 的 时 候 ， 只 需要 根据 浏览 器 的 内 核 选择 几 种 浏览 器 进行 
测试 即 可 。 另 外 还 需要 考虑 到 当前 比较 流行 的 几 种 浏览 器 ， 例 如 ， 王 仍然 是 使 用 最 多 、 使 
范围 最 广 的 浏览 器 ， 而 火狐 浏览 器 和 谷歌 浏览 器 也 是 目前 使 用 比较 广泛 的 浏览 器 。 















































































































































































































































































































































































































































































































































20.1.3 超 链接 的 测试 


每 一 个 网 站 都 是 由 很 多 的 网 页 组 成 的 ， 这 些 网 页 之 间 通 过 超 链 接 相互 关联 ， 组 成 一 个 庞 
大 的 关系 网 。 超 链接 测试 的 内 容 就 是 检查 这 些 网 页 之 间 的 超 链接 是 否 有 效 ， 链 接 对 象 是 否 正 
， 是 否 有 某 些 页 面 被 遗漏 等 。 
如 果 网 站 页 面 比较 少 ， 可 以 通过 人 工 的 方式 进行 测试 ， 但 是 对 于 大 型 网 站 来 说 ， 组 成 网 
站 的 页 面 可 能 有 成 百 上 千 个 ， 这 时 对 超 链接 的 测试 将 是 一 个 非常 庞大 的 工作 。 
大 量 测试 工作 的 出 现 ， 衍 生出 了 一 些 测试 工具 ， 如 Html link validator 和 Xenu Link Sleuth 
等 ， 使 用 这 些 工具 可 以 对 本 地 和 网 站 上 的 网 页 文件 链接 进行 检测 ， 它 们 可 以 检测 出 网 站 上 活 
动 的 链接 和 和 死 链接 。 
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20.2 站 点 的 上 传 























站 点 上 传 是 指 将 站 点 下 的 网 站 上 传 至 网 络 空间 的 过 程 ， 可 以 使 用 Dreamweaver 或 上 传 工 
具 完 成 站 点 上 传 工作 。 





20.2.1 使 用 Dreamweaver 上 传 


Dreamweaver 是 制作 网 站 的 一 款 利器 ， 它 不 仅 可 以 编写 网 站 ， 还 可 以 将 网 站 上 传 至 网 络 
空间 ， 具 体操 作 步 又 如 下 : 


加 打开 Dreamweaver 软 件 ， 选 择 站 点 ， 新 建站 点 命令 ， 打 开 如 图 20.1 所 示 界 面 ， 在 该 界 
面 中 输入 站 点 名 称 和 保存 文件 的 位 置 。 


站 点 设置 对 象 MyTest [<| 
Ns ee ng en 
se 并 


郊 可 以 在 由 处 为 oreamweere 池 点 选择 本 地 文件 夫 和 名称 * 
saw | 



































nei Caitapiaewwiet  ，，，，，，，] 包 
ED EE 
图 20.1 











加 在 上 图 左 侧 的 列表 中 选择 “服务 器 ”选项 ， 如 图 20.2 所 示 。 








让 点 设 轩 对仗 MyTest 
人 
Imtermet 服务 提供 商 (SP) 或 We 
版 本 控制 

* 高 级 设置 es 和 您 无 需 完 成 比 步 蚀 * 如 果 要 洗 按 到 We 并 发 
EE 地 这 次 ji | 油 才 | 
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加 点 击 添加 新 服务 器 的 加 号 ， 打 开 服务 器 设置 对 话 框 ， 如 图 20.3 所 示 。 在 该 对 话 框 中 设 
置 服务 器 的 名 称 ， 选 择 连 接 方法 为 FTP。 你 可 以 从 网 络 空间 服务 器 的 管理 界面 中 获取 FTP 地 
址 、 用 户 名 和 密码 信息 ， 如 图 20.4 所 示 。 



















































































| lS 人 EE 





图 20.4 


加 填写 完 所 有 信息 后 ， 单 击 “ 测 试 ” 按 钮 ， 如 果 测试 成 功 ， 则 弹出 如 图 20.5 所 示 效果 。 
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让 = 
| 



































[> 
L229 二 
Laas 好 各 吉村。 到 到 村 各 委 
» FT Wi 
FT 吉 T ao: 匠 
到 Dreamweaver a 
Ba: 本 
Dresmeesrer 已 记功 尝 术 到 才 的 Wd 反 务 器 。 
Rs Ce] 
Web unt: ism 
* 地 
CC ] [mm | mm 
| Em 3 | 
图 20.5 











单 击 “ 确 定 ”按钮 后 ， 切 换 到 “高 级 ”选项 卡 ， 勾 选 “ 维 护 同步 信 
自动 将 文件 上 传 到 服务 器 ”选项 ， 如 图 20.6 所 示 。 








息 ” 和 “保存 时 
站 点 设置 对 估 MyTest [x | 
六 8 | 
| 
后 区 有 这 和 
» Mie 也 扫 护 日 上 信息 We 并 和 
区 由 有 时 自动 竺 文件 上 人 本 污 器 
己 让 形 文 并 取出 功能 
回 打下 文件 和 了 出 


























图 20.6 


国 单 击 “ 保 存 ” 按 钮 保存 设置 ， 完 成 新 建站 点 的 设置 。 在 新 建 的 站 点 上 创建 一 个 测试 
页 面 index.html， 在 页 面 中 输入 一 段 测试 文字 ， 当 保存 文件 时 ， 系 统 会 提示 您 是 否 将 文件 同步 
保存 到 服务 器 ， 选 择 “ 是 ” 即 可 上 传 文件 。 


加 另外 ， 在 Dreamweaver 中 可 以 选择 站 点 ， 上 传 命令 ， 也 可 以 将 站 点 下 的 所 有 文件 上 传 
到 服务 器 。 


20.2.2 使 用 上 传 工 具 上 传 


除了 Dreamweaver 以 外 ， 还 可 以 使 用 很 多 FTP 了 
8uftp 和 filezilla 等 ， 下 面 


al 























[ 具 将 站 点 上 传 到 虚拟 主机 ， 例 如 flashxp、 
以 8uftp 为 例 介绍 如 何 使 用 上 传 工具 上 传 站 点 。 
加 启动 8uftp 上 传 工 具 ， 界 面 如 图 20.7 所 示 。 
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加 8UFtp 3.3.0.0 = 
文才 ”生日 ” 传 驯 D 视 可 队列 QQ) 县 和 器 (S) 工具 帮 动 中 
ERE EO 






































tt: 月 PP 名: 「 + 「 说 0: 所 I+ 
ET | EE 
Em | Xr | we | E33 [EE :3 | wa | 开 
全 上 ER 录 
nctes 文 4 夫 2015/9/28 16:29 
国 jndexhm 161 HIMLYE 2015/9/281629 
< > 
| 一 个 文件 实 和 一 个 161 字 节 的 文件 。 
本 地 六 位 各 10/0 字 二 ]) ENETIEE 03 EE 
< > 
D2 Bl 0 
图 20.7 











园 选 择 “文件” 一 “站 点 管理 器 ”命令 ， 打 开 “ 站 点 管理 器 ”对 话 框 ， 如 图 20.8 所 示 。 
在 该 对 话 框 中 点 击 “ 新 站 点 ”按钮 ， 创 建 一 个 名 为 MyTest 的 站 点 ， 并 设置 主机 名 、 
用 户 名 和 密码 等 信息 ， 如 图 20.9 所 示 。 


et 二 


登录 类 型 
个 医 名 登录 他 ) 他 一 般 登 录 (L) 
厂 和 略 代理 设 吐 (8) 

用 户 名 (U): 

区 


窒 码 全: 
1 


厂 不 要 记 人 密码 (D。 
有 注 (0): 








新 站 点 加 | 新 文件 夫人 )| 。 刚 除名) 
复制 重 命名 (BE) | 高 级 他 


站 消 办 保存 并 退出 人) 
































个 设置 为 财 认 站 点 (ED) 




















图 20.8 图 20.9 

















四 点击“ 链接 ”按钮 ， 将 链接 到 服务 器 并 返回 主 界面 ， 如 图 20.10 所 示 ， 主 界面 左边 显 
示 的 是 本 地 文件 ， 右 边 显示 的 是 服务 器 上 的 文件 。 
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时 8uftp - 已 连接 到 MyTest (qxw1192940045.my3w.com) - 
区 疝 划 信和 MO 三 工 上 Tm) 关 却 () 


ERE EE 

































































地 址 : [cwiib@BBBBN ny3s com 用 户 名 : [casaaasaiy :er 端 O: 区 适 匡 @@ 
本 地 : 全 这 人 电脑 可 [ 地 : 局 7 
名称 大 小 | 类 型 修改 时 间 名称/ | 大 小 | 关 E | 作 改 时间 | 可 限 
在 上 后 B 录 食 上 有 B 录 
notes 文件 夫 2015/9/28 16:29 [Baspnet_client 文件 卖 2015-4-10 3:57 
[Eindex.html 161 HTML 文档 2015/9/28 16:29 IB HttpErrors 文件 卖 2015-2-9 14;48 
司 indexchtml 161 HTML 文 档 2015-9-28 16:28 
| 司 zhuyehtml 6 KB ”HTML 文档 2014-11-5 21:10 
站 请 先 计 各 bt 306 文本 文档 2014-11-5 21:10 
< 
一 人文 件 顽 和 和 一个 161 字 和 的 文件 文件 奖 和 3 个 文件 ,大 小 : 6913 字 有 。 
本 地 文件 名 [0/0 字 生 ]) 大 小 | 方向 | 运程 文件 各 EM my: 200 Type set to A 
:LIST 
150 Opening ASCIT mode data connection 
226 Transfer complete 
成 功 取得 目录 列表 
< > v 
就 结 JI 两:03 664 
图 20.10 








加 将 左边 的 文件 拖 动 到 右边 ， 即 可 完成 文件 上 传 。 选 中 左边 的 文件 ， 打 开 右 键 菜单 ， 
选中 上 传 命令 也 可 以 完成 上 传 。 如 果 上 传 多 个 文件 ， 这 些 文件 会 有 先后 次 序 ， 在 如 图 20.10 所 
示 左 下 角 的 区 域 会 显示 目前 排队 等 待 上 传 的 文件 ， 而 右 下 角 则 显示 当前 文件 上 传 的 状态 。 





20.3 站 点 的 维护 与 更 新 








创建 与 发 布 网 站 只 是 网 站 建设 的 一 部 分 ， 这 些 工作 可 以 经 过 一 定 努力 很 快 完成 ， 但 是 
站 的 维护 与 更 新 却 是 一 个 长 期 的 工作 ， 需 要 从 方方面面 获取 信息 ， 然 后 检索 有 i 
站 点 进行 维护 ， 并 更 新 网 站 内 容 ， 不 断 满足 用 户 的 需求 。 


20.3.1 收集 与 采纳 用 户 反 馈 


在 网 站 建设 的 时 候 ， 就 需要 考虑 到 网 站 后 期 维护 的 相关 问题 。 作 为 经 常 使 用 网 站 的 用 
户 ， 他 们 会 根据 自己 的 习惯 和 感受 ， 发 现 网 站 的 一 些 弊 端 和 问题 。 如 果 网 站 建设 初期 就 考虑 
到 为 用 户 提 供 一 个 反馈 意见 的 途径 ， 当 用 户 发 现 问题 的 时 候 ， 就 可 以 通过 这 些 途径 向 网 站 管 
理 员 进行 反馈 
另外 ， 网 站 运行 过 程 中 会 产生 一 些 不 可 预知 的 错误 或 问题 ， 在 建设 网 站 的 同时 ， 有 经 验 
的 程序 员 会 根据 不 同情 况 触发 信息 反馈 机 制 ， 当 用 户 遇 到 这 些 问题 的 时 候 ， 可 以 通过 这 个 机 
制 向 网 站 管理 员 提 供 信息 。 
站 上 线 运行 初期 ， 管 理 员 要 时 刻 留意 网 站 的 运行 情况 ， 对 于 用 户 反 馈 的 比较 严重 的 问 
题 ， 要 及 时 组 织 人 员 进 行 处 理 。 另 外 ， 对 于 收集 的 用 户 反馈 信息 ， 也 不 能 一 次 就 全 部 接受 ， 
要 有 针对 性 的 采纳 ， 这 样 才能 保证 网 站 的 正常 运行 。 
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20.3.2 关注 用 户 留 言 


户 留 言 是 用 户 反 馈 网 站 使 用 情况 的 一 种 方式 ， 某 些 网 站 会 为 用 户 专门 开辟 一 个 留言 版 
块 。 用 户 在 访问 网 站 的 时 候 ， 如 果 遇 到 相关 问题 ， 或 者 想 给 网 站 管理 员 提 意见 ， 都 可 以 从 这 
个 版 块 提交 信息 。 
站 管理 员 要 定期 查看 用 户 留言 ， 及 时 了 解 用 户 使 用 网 站 的 情况 ， 掌 握 网 站 的 整体 运行 
情况 ， 为 网 站 的 健康 发 展 做 好 保障 。 























































































































20.3.3 查看 与 回复 用 户 邮件 


基本 上 所 有 的 网 站 导航 菜单 中 都 会 有 一 个 联系 网 站 的 菜单 ， 进 入 该 菜单 页 面 后 ， 用 户 会 
看 到 网 站 的 一 些 联系 方式 ， 其 中 包括 电子 邮件 等 。 某 些 用 户 习 惯 通过 网 站 的 电子 邮件 向 网 站 
管理 员 反馈 网 站 的 使 用 情况 和 建议 。 因 为 网 站 的 电子 邮件 是 网 站 官方 对 外 发 布 的 联系 方式 ， 
所 以 网 站 管理 员 要 定期 查看 、 及 时 回复 并 掌握 用 户 反馈 的 信息 。 


20.3.4 论坛 的 维护 


论坛 是 网 站 运行 过 程 中 ， 收 集 用 户 反 馈 信息 的 最 有 用 的 功能 。 在 论坛 中 可 以 根据 网 站 内 
容 划 分 多 个 模块 ， 不 同 的 模块 安排 相应 的 人 员 进行 管 理 。 可 以 给 每 个 模块 的 管理 员 设置 一 定 
的 权限 ， 由 他 们 总 结 各 自 板 块 中 收集 的 用 户 使 用 信息 。 
前 各 种 论坛 主要 的 内 容 就 是 发 帖 与 回帖 ， 各 板块 的 管理 员 要 经 常 关 注 帖子 的 标题 与 内 
容 ， 对 于 违反 相关 规定 的 帖子 ， 一 定 要 及 时 进行 处 理 ， 对 于 回帖 中 违反 相关 规定 的 内 容 ， 也 不 
能 视而不见 。 对 于 一 些 回帖 比较 多 ， 用 户 比 较 关注 的 帖子 ， 也 可 以 将 其 在 当前 板块 中 置 项， 或 
者 推荐 到 论坛 首页 ， 这 样 不 仅 可 以 吸引 网 站 的 访问 量 ， 还 可 以 了 解 用 户 对 网 站 的 需求 方向 。 


20.3.5 站 点 的 升级 


在 运行 网 站 的 过 程 中 ， 为 了 提高 安全 性 与 用 户 的 友好 体验 ， 都 免不了 要 进行 站 点 的 升 
级 。 但 是 站 点 升级 对 于 网 站 运行 的 影响 也 非常 大 ， 尤 其 影响 SEO 搜索 排名 。 所 以 当 网 站 运行 
稳定 之 后 ， 对 于 站 点 升级 一 定 要 慎重 。 

站 点 升级 不 可 避免 ， 但 是 可 以 尽量 减少 升级 对 网 站 的 影响 ， 为 此 管理 员 需 要 注意 以 下 几 点 。 


(1) 备份 升级 : 我 们 当然 可 以 使 用 Dreamweaver 把 网 站 修改 的 文件 直接 上 传 到 服务 器 ， 
但 是 对 于 一 个 正常 访问 的 网 站 来 说 ， 并 不 建议 这 样 做 ， 因 为 我 们 不 能 保证 每 次 修改 的 内 容 都 
能 按照 预期 结果 正确 显示 。 所 以 ， 有 必要 将 网 站 的 内 容 在 本 地 进行 备份 ， 修 改 备份 的 文件 
进行 充分 的 测试 ， 最 后 再 上 传 至 服务 器 。 
(2) 网 站 基本 信息 : 网 页 上 的 基本 信息 设置 与 搜索 引擎 有 很 大 关系 。 如 果 网 页 的 信息 
设置 合理 ， 搜 索引 擎 将 非常 容易 搜索 到 这 些 网 页 ， 如 果 网 页 的 信息 不 定期 出 现 变动 ， 搜 索引 
擎 将 不 再 收录 这 些 网 页 ， 这 对 网 站 的 搜索 排名 具有 很 大 的 影响 。 所 以 ， 网 站 基本 信息 的 设置 
需要 具有 一 定 的 前 瞻 性 和 稳定 性 。 
(3) 切 勿 因 小 失 大 : 搜索 引擎 希望 网 站 的 信息 尽 可 能 的 稳定 ， 在 站 点 升级 的 过 程 中 ， 
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如 果 不 确定 某 些 信息 是 否 会 影响 搜索 引擎 ， 最 好 不 要 对 这 些 内 容 进行 更 改 。 对 于 大 型 的 网 站 
来 说 ， 有 时 可 能 一 个 很 小 的 改动 ， 在 搜索 引擎 看 来 却 是 巨大 的 变化 。 


20.3.6 站 点 内 容 的 更 新 


















































站 点 的 内 容 是 网 站 的 血 与 肉 ， 一 个 网 站 如 果 想 吸引 用 户 、 留 住 

















内 容 ， 所 以 网 站 内 容 的 更 新 是 关系 到 网 站 健康 发 展 的 关键 。 




































































即便 网 站 上 的 内 容 是 转载 的 ， 只 要 满足 用 户 的 需求 ， 就 能 留 住 










































































需要 不 断 更 新 网 站 的 内 容 ， 而 且 搜索 引擎 更 愿意 收录 原创 的 内 容 。 这 样 ， 当 























户 ， 就 必须 依靠 网 站 的 


及 时 更 新 站 点 内 容 ， 才 能 吸引 更 多 的 用 户 。 用 户 希 望 从 你 的 网 站 获取 源源 不 断 的 信息 ， 
用 户 。 
站 新 用 户主 要 来 源 于 网 站 推广 和 搜索 引擎 ， 要 想 搜索 引擎 更 多 的 收录 









































相关 内 容 的 关键 字 的 时 候 ， 你 的 网 站 的 曝光 率 才 会 更 高 ， 才 能 吸引 更 多 的 新 


20.4 网 站 安全 管 








己 的 网 站 ， 就 
户 在 网 上 搜索 
户 。 


























网 站 安全 一 直 是 站 长 最 关心 的 问题 ， 一 旦 网 站 安全 失守 ， 不 仅 会 给 网 站 带 来 很 多 负面 的 
影响 ， 严 重 的 还 会 泄露 很 多 用 户 隐私 信息 。 所 以 ， 网 络 安全 管理 一 刻 也 不 能 放松 。 





























20.4.1 服务 器 安全 管理 





























对 于 个 人 网 站 而 言 ， 一 般 都 采用 虚拟 主机 ， 服 务 器 的 安全 管理 直接 





















































不 需要 个 人 用 户 担 心 。 
对 于 企业 用 户 而 言 ， 部 分 用 户 会 考虑 使 用 自己 的 服务 器 ， 












































服务 提供 商 保证 ， 


上 时 就 需要 考虑 服务 器 安全 








管理 的 问题 。 通 常情 况 下 ， 企 业 会 有 自己 的 服务 器 管理 人 员 ， 他 们 会 授权 相关 人 员 使 用 服务 

















器 ， 并 对 相关 资源 进行 调配 和 使 用 。 管 理 员 需要 负责 服务 器 的 





























常 管理 和 维护 ， 包 括 服 务 器 














账户 密码 的 管理 、 主 要 文件 的 更 新 和 修改 、 网 站 以 及 网 站 相关 文件 和 代码 的 安全 、 漏 洞 的 检 








查 和 管理 、 病 毒 和 木马 的 清除 等 工作 。 


20.4.2 FTP 密 码 的 安全 保护 
本 地 文件 上 传 到 服务 器 的 主要 依据 就 是 FTP 账 户 和 密码 ， 折 














E 何 具有 FTP 账 户 和 密码 的 人 都 





可 以 对 服务 器 上 的 资源 进行 更 改 。 所 以 ，FTP 密 码 日 常 的 维护 非常 重要 。 








手 加 强 FTP 密 码 的 安全 保护 工作 。 











口 











(1) 口令 的 期 限 ， 管理 员 在 创建 临时 FTP 账 户 的 时 候 ， 忆 









































以 设置 FTP 








以 从 以 下 几 点 着 


令 的 期 限 ， 比 如 





设置 口令 当前 有 效 ， 第 二 天 自动 消失 。 当 下 次 需要 创建 临时 FTP 的 时 候 ， 只 需要 更 改 一 次 密 



































码 即 可 再 次 使 用 。 而 对 于 长 期 使 用 FTP 的 用 户 ， 管 理 员 可 以 创建 一 个 期 限 比较 长 的 FTP 账 户 。 
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期 限 管理 FTP 账 户 密码 ， 可 以 有 效 提高 密码 





改 的 频率 。 
































(3) 






























































力 破 生 


(4) 




















而 且 密 码 中 必须 





令 历 史记 录 : 如 果 启 动 了 口令 历史 记录 功能 ，FTP 服 务 器 会 在 指定 的 时 间 内 禁止 
户 修改 使 用 过 的 密码 ， 这 样 可 以 有 效 提 高 口令 的 安全 性 。 
账户 锁定 策略 :理论 上 说 ， 暴 力 破解 可 以 破解 所 有 的 密码 。 为 了 避免 有 人 采 


密码 复杂 度 : 很 多 人 习惯 使 用 生日 、 电 话 号 码 、 身 份 证 号 码 等 作为 密码 ， 这 就 
留 下 了 可 乘 之 机 ， 为 了 杜绝 这 类 事情 的 发 生 ， 在 设置 密 
5 寻 和 特殊 符号 组 成 的 大 于 一 定 长 度 的 密码 ， 
可 以 有 效 提 高 密码 的 安全 度 。 密 码 中 也 不 能 设置 与 账户 相关 的 信息 ， 











码 的 时 候 ， 需 要 使 用 数 
包含 大 小 写字 母 ， 这 样 
那样 也 会 增加 密码 泄 


















































采用 暴 
界 的 方式 获取 FTP 密 码 ， 需 要 启动 账户 锁定 策略 。 账 户 锁定 策略 可 以 限定 用 户 的 登录 失 
亚 生 


败 次 数 ， 在 超过 指定 登录 失败 次 数 后 ， 服 务 器 会 自动 锁定 这 个 账号 ， 


























并 向 管理 员 发 出 警 


























动 解锁 。 





























锁定 后 的 账户 可 以 通过 人 工 解锁 ， 也 可 以 设置 在 锁定 一 定时 间 后 系统 
20.4.3 网 站 程序 的 安全 管理 

网 站 程序 的 安全 依然 是 网 站 建设 者 需要 考虑 的 重要 因素 之 一 ， 可 
强 网 站 程序 的 安全 管理 


务 器 上 的 数据 系统 库 的 连接 用 户 名 和 密码 等 重要 信息 。 
f 造 成 系统 损坏 。 因 此 有 必要 限制 访问 用 


还 可 


量 的 过 


侵 者 


(1) 


(2) 


能 自 改 并 
代码 。 


以 通过 以 下 几 个 方面 加 

















强化 脚本 安全 : 脚本 是 纯 文 本 格式 ， 恶 意 者 通过 源 代 码 可 以 很 容易 地 看 到 网 站 服 


















































进而 轻松 查看 数据 库 中 的 所 有 信息 ， 





户 、 设 置 访问 权限 、 加 密 或 隐藏 脚本 源 














加 入 防 注入 技术 : 现在 基于 Web 的 攻击 一 般 都 是 注入 
沽 不 完全 ， 从 而 可 以 使 入 侵 者 非法 执行 程 





。 导 致 注入 的 原因 一 般 为 对 变 




















是 基于 SQL 注入 实现 的 ， 所 以 需要 在 网 络 程序 中 加 入 防 注 











序 或 查询 修改 任意 数据 。 现 在 大 部 分 黑客 入 
入 代码 ， 在 上 传 文件 入 口 处 或 














关键 程序 中 增加 一 行 代码 调用 防 注 入 程序 ， 比 如 URL、 表 单 等 提交 信息 ， 通 过 一 段 防止 SQL 


注入 的 过 沽 代码 即 可 防止 出 错 信息 暴露 ， 
































页 


面 等 。 


(3) 








览 





页 的 状态 。 这 样 有 利于 管理 












































20.4.4 数据 的 安全 管理 


在 实际 的 网 络 运行 环境 中 ， 数 据 的 备份 与 恢复 功能 是 非常 重要 


或 者 通过 转向 ， 


在 Web 程 序 中 应 当 使 用 Session 对 象 : 暂时 或 永久 性 
户 ， 防 止 非法 用 户 入 侵 。 











当 系统 出 错时 转 到 一 个 提示 出 错 的 



































也 保留 使 用 者 的 信息 以 及 目前 浏 




















的 。 因 为 虽然 可 以 从 预 



































、 检 查 、 


反应 等 方面 着 手 减少 网 络 信息 系统 的 不 安全 因素 ， 但 是 要 完全 保证 系统 不 出 现 安 
证， 这 是 任何 人 都 不 可 能 做 到 的 。 























如 果 数 据 一 旦 丢失 ， 并 且 不 能 恢复 ， 那 么 就 可 能 会 造成 不 可 挽 
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的 损失 。 在 国外 已 经 出 














现 过 在 某 个 公司 网 络 遭 到 损坏 时 ， 因 网 站 建设 的 管理 员 没有 保存 足够 的 备份 数据 ， 从 而 无 法 




















恢复 该 公司 的 信息 系统 ， 造 成 无 法 挽回 的 损失 ， 导 致 公司 破产 的 先例 。 





策略 和 数据 恢复 方案 是 实现 这 种 安全 性 的 重要 方法 。 

















网 络 系统 的 数据 备份 
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第 21 章 搜索 引擎 优化 


同样 类 型 的 网 站 ， 为 什么 别人 的 网 站 在 搜索 结果 中 排名 靠 前 ， 而 自己 的 网 站 却 连 个 影 
都 找 不 到 ， 这 就 是 搜索 引擎 优化 的 效果 。 搜索 3 引 瑟 优化 可 以 让 自己 的 网 站 在 搜索 结果 中 排名 
靠 前 ， 获 取 更 高 的 曝光 率 ， 吸 引 更 多 的 访问 量 。 










































































21.1 搜索 引擎 优化 概述 








当今 互联 网 发 展 如 此 的 迅猛 ， 睡 一 觉 起 来 可 能 就 有 成 和 干 上 万 个 网 站 诞生 了 ， 如 此 多 的 网 
站 ， 搜 索引 擎 依据 什么 对 这 些 网 站 进行 搜索 排行 呢 ? 这 就 是 搜索 引擎 优化 需要 做 的 事情 。 


























21.1.1 什么 是 SEO 

















SEO 是 搜索 引擎 优化 的 简称 ， 它 的 全 称 叫做 Search Engine Optimization。SEO 是 一 种 利 
搜索 引擎 的 搜索 规则 来 提高 目前 网 站 在 有 关 搜 索引 擎 内 的 自然 排名 的 方式 。 用 户 可 以 从 网 站 
结构 、 内 容 建设 方案 、 用 户 互动 传播 、 页 面 等 角度 进行 合理 规划 ， 使 网 站 更 适合 搜索 引擎 的 
索引 原则 ， 从 而 获取 更 多 的 免费 流量 。SEO 分 为 站 外 SEO 和 站 内 SEO 两 方面 。 使 网 站 更 适合 
搜索 引擎 的 索引 原则 又 被 称 为 对 搜索 引擎 优化 ， 对 搜索 引擎 优化 不 仅 能 够 提高 SEO 的 效果 ， 
还 会 使 搜索 引擎 中 显示 的 网 站 相关 信息 对 用 户 来 说 更 具有 吸引 力 。 
















































































































































































21.1.2 为 什么 要 做 SEO 


如 果 一 个 网 站 不 做 SEO， 那 么 在 茫茫 互联 网 的 世界 里 ， 它 将 一 沉 到 底 ， 很 难 被 其 他 用 户 
访问 。 如 果 一 个 网 站 做 了 SEO， 在 用 户 搜索 的 时 候 也 不 一 定 马上 会 看 到 这 个 网 站 ， 那 么 为 什 
么 还 要 做 SEO 了 呢 ? 主要 是 因为 做 了 SEO 后 会 有 以 下 的 优点 。 

1. 搜索 流量 质量 高 

通过 其 他 方法 推广 网 站 ， 主 要 是 把 网 站 推 到 用 户 眼 前 ， 如 果 用 户 根本 没有 访问 这 个 网 站 
需要 ， 那 么 这 对 用 户 来 说 就 是 一 种 垃圾 信息 ， 会 造成 用 户 的 反感 。 而 通过 SEO 优 化 后 ， 网 
站 将 会 出 现在 用 户 搜索 的 结果 中 ， 这 样 用 户 会 将 其 视 为 有 效 信 息 ， 用 户 访问 网 站 的 目的 性 
强 ， 转 化 率 也 会 更 高 。 

2. 性 价 比 高 

SEO 相 对 于 其 他 网 站 推广 方式 更 加 经 济 实惠 ， 网 站 只 需要 花费 较 少 的 投入 ， 加 上 一 些 简 


















































































































































































































































单 的 技术 就 可 以 获得 
3. 可 扩展 性 





做 SEO 的 关键 是 通过 关键 词 的 排名 ， 以 及 一 些 长 
的 改动 非常 敏感 ， 
的 关键 词 ， 只 有 慢 慢 添加 关键 词 ， 才 能 不 断 增加 





搜索 引擎 对 了 


曝光 率 。 
4. 长 期 有 效 性 


F 网 站 关键 启 





得 较 大 的 


5 














报 。 这 对 个 人 站 点 的 


所 以 在 改动 关键 词 
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户 来 说 ， 性 价 比 还 是 很 高 的 。 











尾 关键 词 来 提高 网 站 本 身 的 pv， 但 是 


的 时 候 不 能 一 次 性 改动 太 多 














做 SEO 可 以 提高 








己 网 站 在 搜索 引擎 9 














的 








己 网 站 的 目标 关键 词 ， 从 而 提高 网 站 的 























然 排名 ， 网 站 的 pv 会 一 直 存在 ， 如 果 网 站 的 














排名 一 旦 做 上 去 了 ， 就 很 难 再 掉 下 来 ， 即 便 有 变动 也 不 会 太 多 。 它 不 像 其 他 的 一 些 网 站 推广 


方式 ， 如 网 络 广告 等 ， 这 些 推广 一 旦 停止 付费 
的 网 站 在 搜索 引擎 中 的 排名 提前 ， 




















才 会 吸引 更 多 的 新 














户 。 


增加 网 站 的 





推广 就 会 立即 停止 。 做 SEO 的 
暴光 率 ， 这 样 才能 让 我 们 的 网 站 


的 是 将 我 们 
E 到 前 面 去 ， 



































21:2 搜索 引擎 优化 实战 


搜索 引擎 优化 包括 很 多 内 容 ， 


索引 拿 优 化 的 方法 。 





下 














21.2.1 内 部 优化 


内 阐 
种 元 素 的 


1. 页 面 标题 优化 





页 面 

















标题 优化 是 指 对 <title> 标 签 





或 部 分 内 容 作 为 摘 


信息 中 的 标题 














从 以 下 用 


L 个 方面 








优化 页 





面 标题 。 











优化 可 以 理解 为 针对 搜索 引擎 的 算法 ， 对 网 
优化 都 将 或 多 或 少 地 改变 搜索 引擎 的 收录 与 


内 容 的 优化 ， 大 多 数 搜索 引擎 都 会 提取 
因此 ， 网 页 的 标题 必须 做 到 主题 突出 、 


我 们 将 以 内 部 优化 和 外 部 优化 两 个 部 分 来 详细 介绍 搜 


站 内 部 结构 进行 调整 和 改变 ， 网 站 内 各 


网 站 权重 。 


EE 











页 标题 的 全 部 
内容 简 洁 。 可 以 











b 











(1) 标题 长 度 : 搜索 结果 中 摘要 信息 的 标题 主 
际 情况 对 标题 内 容 进行 截取 。 例 如 google 的 搜索 结果 中 ， 





引擎 会 根据 实 


























H 








的 内 容 ， 不 同 的 搜索 
商 要 信息 标题 的 长 度 


要 来 源 于 页 面 标题 











为 容 将 被 省 略 。 所 必 
(2) 关键 字 分 





一 般 在 72 字 节 (36 个 


布 :搜索 引 





Ph 文 ) 左 右 ， 而 





百度 则 只 





右 ， 超 出 这 个 范围 的 





《有 56 字 节 (28 个 中 文 ) 左 





























， 在 做 标题 优化 














容 是 网 页 中 最 先 出 


因 


现 的 信息 。 











计 应 尽量 将 有 








的 信息 限制 在 28 个 中 文字 符 之 内 。 





擎 在 分 析 页 面 时 ， 
此 ， 在 标题 的 最 前 











b 

















在 HTML 源 代码 
徊 加 上 页 面 的 六 


上 而 下 进行 分 析 ， 标 题 
E 关 键 字 ， 可 以 有 效 地 突 






































出 页 面 的 主题 ， 提 高 
(3) 关键 字 词 

















频 : 标题 


相关 性 。 





ph 的 关键 词 并 





fF 非 重复 的 越 多 越 好 ， 而 


旦 二 本 
三 和布 女 





根据 实际 情况 ， 使 
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主 关 键 词 和 辅 关键 词 的 词 频 相同 ， 而 辅 关 键 词 可 以 是 
标题 的 表达 方法 : 


<title> 手 机 15.5 寸 屏 手机 </title> 
<title> 手 机 -最 新 流行 的 5. 5 寸 屏 手机 </title> 














第 1 种 表达 方式 重复 了 主 关键 词 “手机 ”， 而 且 还 对 主 关键 词 进行 了 扩 导 
机 ”， 而 第 2 种 表达 方式 对 主 关键 词 进行 了 描述 ， 这 样 更 能 得 到 搜索 引擎 的 青睐。 











(4) 关键 字 组 合 技巧 ， 标 题 中 的 主 、 辅 关键 

















主 关键 词 的 扩展 或 描述 。 例 如 下 


回 


两 种 












































〈，) 或 不 使 用 间隔 的 方式 进行 组 合 ， 这 样 不 但 可 
页 面 被 检索 的 机 率 。 


2. 关键 词 标签 优化 






































网 页 中 的 meta 标 签 用 于 鉴别 作者 、 设 定 页 面 格式 、 标 注 内 容 提 要 和 关键 词 ， 












































。 对 于 关键 词 的 优化 ， 可 以 分 为 以 下 3 个 步骤 。 








字 可 以 使 用 竖 杠 (|) 、 空 格 ( ) 、 豆 号 
以 有 效 拓展 标题 的 意义 ， 而 且 还 可 以 增 


让 


“5.5 寸 屏 3 














以 及 刷新 页 


而 等 等 。 关 键 词 (keywords) 是 meta 标 签 中 非常 重要 的 内 容 ， 对 SEO 优 化 起 着 至 关 重 要 的 作 





园 关键 词 的 选择 ; 选择 合适 的 关键 词 非常 重要 ， 可 以 选择 品牌 关键 词 ， 如 某 某 汽车 ; 
还 可 以 选择 相关 关键 词 ， 如 在 线 小 游戏 ， 也 可 以 选择 长 尾 关 键 词 ， 如 房地产 业内 精英 等 。 


关键 词 的 密度 : 虽然 搜索 引擎 偏爱 关键 词 密度 高 的 网 页 ， 


高 ， 搜 索引 擎 就 一 定 会 收录 。 


但 并 不 是 关键 词 密度 越 


加 关键 词 的 锚 文本 : 关键 词 加 上 超 链接 ， 就 是 一 个 锚 文 本 。 当 互联 网 上 大 量 的 锚 文本 





指向 一 个 网 站 时 ， 搜 索 锚 文本 关键 词 的 时 候 ， 这 个 网 站 的 排名 将 会 靠 前 。 


3. 描述 标签 优化 














仅 可 以 为 网 站 增加 关键 词 密 度 ， 而 且 还 可 以 吸引 更 

















网 站 描述 标签 优化 是 指 对 description 的 优化 ， 这 个 优化 对 于 新 的 网 站 来 说 非常 

多 的 用 户 。 描 述 标签 并 非 越 长 越 好 ， 而 是 
应 该 控制 在 150 个 字 以 内 ， 把 其 中 的 语句 写成 醒目 的 广告 语 ， 并 适当 的 重复 几 次 
关键 词 ， 不 要 写 入 网 站 地 址 、 无 关 的 信息 以 及 特殊 字符 等 。 

















4. 链接 优化 











相对 来 说 ， 网 站 链接 越 多 ， 网 站 的 权重 越 高 ， 关 键 字 排名 也 会 越 好 。 另 外 ， 





重要 ， 它 不 

















站 的 目标 

















站 外 部 链 


接 多 的 网 站 ， 被 搜索 引擎 旷 蛛 亿 行 抓 取 的 次 数 和 机 会 较 多 ， 这 也 是 很 多 网 站 内 容 没 有 更 新 ， 
快照 却 持续 更 新 的 原因 。 所 以 稳定 的 网 站 链接 ， 特 别 是 高 权重 外 链 建设 ， 对 于 网 站 更 新 频率 


























及 网 站 排名 都 有 作用 。 
6. 页 面 更 新 










































































在 页 面 更 新 的 时 候 ， 需 要 更 新 一 些 图 文 并 茂 的 文章 ， 因 为 同样 权重 的 网 站 

















网 站 比 纯 文字 的 网 站 排名 要 高 。 更 新 文章 的 时 候 要 注意 合理 的 段落 标题 结构 


文章 的 关键 字 作为 标题 。 














图 文 并 茂 的 








可 以 适当 的 把 








页 面 更 新 应 尽量 围绕 网 站 的 关键 字 ， 更 新 的 文 











标题 和 内 容 里 面 可 以 适当 的 包括 网 站 的 




















关键 字 ， 不 一 定 是 现 有 的 关键 字 ， 可 以 是 相同 意思 的 关键 字 。 
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21.2.2 外 部 优化 

















个 方面 
1. 外 链 运营 
外 链 是 指 从 别人 的 





站 外 部 优化 主要 是 在 网 络 环 


境 中 对 网 站 进行 的 优化 ， 
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网 站 导入 到 

















己 网 站 的 链接 。 导 入 链接 所 在 页 


们 网 站 在 搜索 引擎 中 的 权重 ， 所 以 外 链 对 于 网 站 优化 非常 重要 。 











外 链 的 发 布 需要 我 们 辛勤 的 工作 ， 





























论坛 等 地 方 发 布 文章 ， 


网 站 培养 权重 一 个 月 后 ， 再 发 布 有 质量 的 





2. 友情 链接 








凡 容 更 新 围绕 着 

















链 。 


EF 要 包括 儿 


链 运营 和 友情 链接 两 

















的 权重 直接 决定 了 我 




















以 在 各 大 博客 、B2B 平 台 、 分 类 信息 平台 、 文 库 、 
己 网 站 的 推广 来 做 ， 前 期 不 要 太 着 急 发 布 外 链 ， 等 


友情 链接 也 称 为 交换 链接 ， 是 具有 一 定 资源 互补 优势 的 网 站 之 间 的 简单 合作 形式 ， 合 作 


方 可 以 在 对 方 的 网 站 上 放置 




















这 也 是 一 种 互相 推广 的 


手段 





21.2.3 向 搜索 引擎 提交 网 站 

















句 搜索 引擎 提交 自 


己 的 网 站 ， 也 叫做 搜索 营销 ， 








己 网 站 的 logo 和 网 站 名 称 ， 并 设置 超 链接 到 





己 的 网 站 上 来 ， 




















的 在 























































































































义 百度 搜索 引擎 为 例 ， 介 绍 如 何 


让 搜索 3 





拿 收录 自己 的 网 站 。 
己 的 网 站 ， 完 成 收录 









































搜索 
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我 们 知道 网 站 要 被 搜索 引 拿 收 东 ， 除 了 等 待 搜 索引 拿 的 化 虫 程序 找 到 
之 外 ， 还 可 以 直接 向 搜索 引擎 提交 自己 的 网 站 ， 达 到 收录 的 目的 。 
前 各 搜索 引擎 都 有 自己 的 搜索 引擎 入 口 ， 下 
引擎 提交 自己 的 网 站 。 
打开 百度 搜索 引擎 入 口 地 址 : http://www.baidu.com/search/url_submit.html。 





加 在 打开 的 页 面 中 填写 自己 网 站 的 链接 








也 址 ， 如 图 21.1 所 示 。 








mmegoetcom 


BalEm sr 











Een 

EE A 

CE CR 
图 21.1 














园 点 击 “ 提 交 ” 按 钮 ， 等 待 百 度 收 录 你 的 网 站 。 
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21.2.4 建立 HTML 站 点 地 图 





HIMIL 的 网 站 地 图 主要 有 两 个 作用 ， 一 个 是 便于 浏览 者 了 解 网 站 的 结构 ， 另 一 个 是 为 蜂 
味 抓 取 页 面 信息 提供 方便 。 可 以 在 Dreamweaver 中 使 用 锚 文 本 的 形式 制作 站 点 地 图 ， 例 如 下 
而 这 人 句 : 















































<p><a href=http://blog.sina.com.cn/sitemap.html> 站 点 地 图 </a></p> 

通过 制作 一 级 和 二 级 菜单 完成 站 点 地 图 的 制作 。 创 建 完 成 后 ， 将 这 个 文件 保存 在 站 点 根 
目录 下 ， 并 在 网 站 页 面 上 设置 超 链接 即 可 。 

另外 ， 还 可 以 通过 在 线 站 点 生成 工具 或 者 站 点 生成 软件 生成 站 点 地 图 。 对 于 一 些 页面 比 
较 多 的 网 站 而 言 ， 使 用 工具 生成 站 点 地 图 会 更 方便 一 些 。 
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